angularjs - Nested directive inside template is placed at the top -

i'm having issues angularjs directive i'm attempting make.

the main directive called tableu, has tableu-heading , tableu-body, both of inside table so:

<table>     <tableu-heading headings='data.format'>     </tableu-heading>     <tableu-body data='data'>     </tableu-body> </table> 

the issue is, in chrome , firefox, (but not in ie8 reason) resulting code inserted when envoke directive formatted strangly. end with;

<tableu>     <tableu-heading>     </tableu-heading>     <tableu-body>     <tableu-body>     <table>     </table> </tableu> 

so nested directives placed inline table. i've tried few permutations transclude thinking might problem can't seem resolve issue.

my directive code thus:

angular.module('air.directives.tableu',[])  .directive('tableu', function () {   return {     restrict:'ea',     scope: {         data: '=',     },     templateurl: 'template/tableu/tableu.html'   }; })  .directive('tableuheading',function() {   return {     restrict:'ea',     replace: false,     scope: {         headings: '='     },     templateurl: 'template/tableu/tableu-heading.html',     compile: function compile(telement, tattrs, transclude) {           return function link(scope, ielement, iattrs) {          }     }   }; })  .directive('tableubody',function() {   return {     restrict:'ea',     transclude: true,     replace: false,     templateurl: 'template/tableu/tableu-body.html',     compile: function compile(telement, tattrs, transclude) {           return function link(scope, ielement, iattrs) {          }     }   }; }) 

any can give appreciated - can't think solution obvious.

mark rajcok seems correct. solution me invoke directives class or attribute instead of element - avoids particular problem.