title: AngularJS ng-repeat tbody duplicated
body: <p>I'm trying to create the following table structure (Example 1) with AngularJS and ng-repeat. The only requirement I have is that the <strong>tbody</strong> does not get repeated. The data I'm working with has structure of product.productunit. The left table cell that has a rowspan=3 will display an image and the follow right 3 cells will display product units of that image. The entire table will then be placed in a fixed scrollable grid with fixed header/footers using css:  tbody {overflow-y: scroll}. Unfortunately having multiple tbodys between each product breaks apart scrolling as one table as shown in (Example 2) which is non-working.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>My question is how to remove the ng-repeat within the tbody. People below voted my question down due to the fact my example shows the ng-repeat together with tbody. I'm asking on how to rewrite my code to render the html correctly like in (Example 1). The end result should allow me to have a table like the following fiddle example link.</p>
  
  <p>jsfiddle.net/TroyAlford/SNKfd </p>
  
  <p><strong>Example 1</strong></p>
  
  <pre><code>&lt;table style="width: 500px; border-style: solid; border-width: 1px"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
      &lt;td rowspan="3" style="width: 250px"&gt;
      &lt;img src=".." /&gt;
      &lt;/td&gt;
      &lt;td&gt;Unit 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Unit 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Unit 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td rowspan="3" style="width: 250px"&gt;
      &lt;img src=".." /&gt;
      &lt;/td&gt;
      &lt;td&gt;Unit 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Unit 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Unit 3&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/tbody&gt;
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p>This is the AngularJS bound to my nested products and units. I'm also aware of ng-repeat-start and ng-repeat-end which so far I don't think will work?</p>
  
  <p>Second, the example below first must repeat a TR for each product with a nested TDs for each unit. </p>
  
  <p><strong>Example 2</strong></p>
  
  <pre><code>&lt;div class="scrollable-table-wrapper"&gt;
  
      &lt;table id="tablegrid"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Product&lt;/th&gt;
                  &lt;th&gt;Unit&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;!-- my issue is here with tbody repeated for each product --&gt;
          &lt;tbody ng-repeat="product in productsList"&gt;
  
             &lt;tr ng-repeat="resProductUnit in product.ResProductUnits"&gt;
  
              &lt;!-- place first cell with rowspan to match units length --&gt;
              &lt;td ng-if="$index == 0" rowspan="{{product.ResProductUnits.length}}"&gt;
                 &lt;img src="{{ product.ImageGalleryId }}" /&gt;
              &lt;/td&gt;
  
              &lt;!-- /ResProductUnits --&gt;
              &lt;td&gt;
                 &lt;label&gt;Unit: {{resProductUnit.Title}}&lt;/label&gt;
              &lt;/td&gt;
  
              &lt;/tr&gt;       
              &lt;!-- /ResProductUnits--&gt;
          &lt;/tbody&gt;
  
      &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>