title: AngularJS ng-repeat with custom element inside a table is rendering strangely
body: <p>I'm trying to re-use a portion of my HTML view in multiple places.  The portion I want to re-use is table cells in an HTML table.  The problem is that my custom directive inside a ng-repeat is doing funny things.  I have reproduced the problem on <a href="http://jsfiddle.net/ravishi/BA4tQ/" rel="noreferrer">jsFiddle</a>.  There are two HTML tables in the jsFiddle.  The first is ng-repeat with the table cells written in the view and the second is the table cells coming from a directive, my-element.  Chrome dev tools report that the rendered HTML looks like this.  Note that the custom element appears only once and is outside the table.</p>
  
  <p>Rendered HTML</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl" class="ng-scope"&gt;
      table1
      &lt;table class="table table-hover"&gt;
        &lt;tbody&gt;&lt;!-- ngRepeat: p in people --&gt;
            &lt;tr ng-repeat="p in people" class="ng-scope"&gt;
              &lt;td class="ng-binding"&gt;Name: Mike&lt;/td&gt;
              &lt;td class="ng-binding"&gt;Age: 20&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr ng-repeat="p in people" class="ng-scope"&gt;
              &lt;td class="ng-binding"&gt;Name: Peter S&lt;/td&gt;
              &lt;td class="ng-binding"&gt;Age: 22&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;br&gt;table2
      &lt;my-element class="ng-binding"&gt;Name: Age: &lt;/my-element&gt;
      &lt;table class="table table-hover"&gt;
        &lt;tbody&gt;
          &lt;!-- ngRepeat: p in people --&gt;
          &lt;tr ng-repeat="p in people" class="ng-scope"&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="p in people" class="ng-scope"&gt;    
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Source HTML</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      table1
      &lt;table class="table table-hover"&gt;
          &lt;tr ng-repeat="p in people"&gt;
              &lt;td&gt;Name: {{ p.name }}&lt;/td&gt;
              &lt;td&gt;Age: {{ p.age }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;br/&gt;table2
      &lt;table class="table table-hover"&gt;
          &lt;tr ng-repeat="p in people"&gt;
              &lt;my-element&gt;&lt;/my-element&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Source JS</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.directive('myElement', function () {
      return {
          restrict: 'E',
          template: '&lt;td&gt;Name: {{ p.name }}&lt;/td&gt;&lt;td&gt;Age: {{ p.age }}&lt;/td&gt;'
      }
  });
  
  function MyCtrl($scope) {
      $scope.people = [{
          name: 'Mike',
          age: 20
      }, {
          name: 'Peter S',
          age: 22
      }];
  }
  </code></pre>
  
  <p>Please note the jsFiddle is a trivial example and common sense would lead to just not using directives at all.  However, my target code has a much larger template that I want to re-use.  I've tried using "ng-include" as well but the result is similar.</p>