javascript - AngularJS ng-repeat with custom element inside a table is rendering strangely -

i'm trying re-use portion of html view in multiple places. portion want re-use table cells in html table. problem custom directive inside ng-repeat doing funny things. have reproduced problem on jsfiddle. there 2 html tables in jsfiddle. first ng-repeat table cells written in view , second table cells coming directive, my-element. chrome dev tools report rendered html looks this. note custom element appears once , outside table.

rendered html

<div ng-controller="myctrl" class="ng-scope">     table1     <table class="table table-hover">       <tbody><!-- ngrepeat: p in people -->           <tr ng-repeat="p in people" class="ng-scope">             <td class="ng-binding">name: mike</td>             <td class="ng-binding">age: 20</td>           </tr>           <tr ng-repeat="p in people" class="ng-scope">             <td class="ng-binding">name: peter s</td>             <td class="ng-binding">age: 22</td>           </tr>       </tbody>     </table>     <br>table2     <my-element class="ng-binding">name: age: </my-element>     <table class="table table-hover">       <tbody>         <!-- ngrepeat: p in people -->         <tr ng-repeat="p in people" class="ng-scope">         </tr>         <tr ng-repeat="p in people" class="ng-scope">             </tr>       </tbody>     </table> </div> 

source html

<div ng-controller="myctrl">     table1     <table class="table table-hover">         <tr ng-repeat="p in people">             <td>name: {{ p.name }}</td>             <td>age: {{ p.age }}</td>         </tr>     </table>     <br/>table2     <table class="table table-hover">         <tr ng-repeat="p in people">             <my-element></my-element>         </tr>     </table> </div> 

source js

var app = angular.module('myapp', []);  app.directive('myelement', function () {     return {         restrict: 'e',         template: '<td>name: {{ p.name }}</td><td>age: {{ p.age }}</td>'     } });  function myctrl($scope) {     $scope.people = [{         name: 'mike',         age: 20     }, {         name: 'peter s',         age: 22     }]; } 

please note jsfiddle trivial example , common sense lead not using directives @ all. however, target code has larger template want re-use. i've tried using "ng-include" result similar.

<td> known behave strangely in directives this. instead, use directive on parent <tr>. read more issue here: https://github.com/angular/angular.js/issues/1459

<table>     <tr ng-repeat="p in people" my-element></tr> </table> 

here how can further improve directive more re-usable.

app.directive('myelement', function () {   return {     scope: {       item: '=myelement'     },     restrict: 'ea',     template: '<td>name: {{item.name}}</td><td>age: {{item.age}}</td>'     }; }); 

and pass in value of item so:

  <table>     <tr ng-repeat="person in people" my-element="person"></tr>   </table> 

live demo