title: Is there an angularjs nested table element limit?
body: <p>I am trying to render HTML that looks like this with angular:</p>
  
  <pre><code>  &lt;table&gt;
    ...
          &lt;tr&gt;
              &lt;td colspan="4"&gt;&lt;b&gt;title&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="3"&gt;detail&lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>There is a detail line for each item.</p>
  
  <p>My data looks like this:</p>
  
  <pre><code>$scope.Data = {
    ItemList: [{
      "Name": "Bubba",
      "List": [
        {
          item1: 7,
          item2: 3,
          item3: 4,
          comment: "comment 1 "
        },
        {
          item1: 7,
          item2: 3,
          item3: 4,
          comment: "comment 2 "
        },
        {
          item1: 7,
          item2: 3,
          item3: 4,
          comment: "comment 3 "
        }]
          }, {
      "Name": "Bubba2",
      "List": [{
          item1: 7,
          item2: 3,
          item3: 4,
          comment: "comment 4 "
        },
        {
          item1: 7,
          item2: 3,
          item3: 4,
          comment: "comment 5 "
        },
        {
          item1: 7,
          item2: 3,
          item3: 4,
          comment: "comment 6 "
        }]
    }];
  }
  </code></pre>
  
  <p>Here is template I have been using:</p>
  
  <pre><code>  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;header&lt;/td&gt;
              &lt;td&gt;col1&lt;/td&gt;
              &lt;td&gt;col2&lt;/td&gt;
              &lt;td&gt;col3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody ng-repeat="j in Data.ItemList"&gt;
              &lt;td colspan="4"&gt;&lt;b&gt;{{j.Name}}&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="k in j.List"&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;{{k.item1}}&lt;/td&gt;
              &lt;td&gt;{{k.item2}}&lt;/td&gt;
              &lt;td&gt;{{k.item3}}&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="3"&gt;{{k.comment}}&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It does not render the comment because it is outside the looping tr.</p>
  
  <p>Is it possible to do this? I have tried a few thing but nothing seems to work.</p>
  
  <p>Here is a plunker of where I am with this: <a href="http://plnkr.co/edit/7YtEX1?p=preview" rel="nofollow">http://plnkr.co/edit/7YtEX1?p=preview</a></p>