title: Setting up a table for multiple levels of ng-repeat in AngularJS
body: <p>We have reports set up on our customer's site with various kinds of data.  The structure of most reports is something like:</p>
  
  <pre><code>Headers
  [Group 1 rows]
  Group 1 totals
  [Group 2 rows]
  Group 2 totals
  ...
  [Group x rows]
  Group x totals
  Grand totals
  </code></pre>
  
  <p>We accomplish this in a table using something like this</p>
  
  <pre><code>&lt;table&gt;
  &lt;th&gt;...&lt;/th&gt;
  &lt;tbody ng-repeat="group in data"&gt;
  &lt;tr ng-repeat="row in data"&gt;...&lt;/tr&gt;
  &lt;tr&gt;group totals&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tr&gt;grand totals&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have a report I'm trying to design that has multiple levels of looping needed. The structure would look more like this:</p>
  
  <pre><code>Headers
  | [Group 1.1.1 rows]
  | Group 1.1.1 totals
  | [Group 1.1.2 rows]
  | Group 1.1.2 totals
  Group 1.1 Totals
  | [Group 1.2.1 rows]
  | Group 1.2.1 totals
  | [Group 1.2.2 rows]
  | Group 1.2.2 totals
  Group 1.2 Totals
  Group 1 Totals
  ...
  | [Group x.1.1 rows]
  | Group x.1.1 totals
  | [Group x.1.2 rows]
  | Group x.1.2 totals
  Group x.1 Totals
  Group x Totals
  Grand Totals
  </code></pre>
  
  <p>I know Tbodys cannot be nested. I was looking to avoid multiple tables because it would be a huge pain to have all the columns line up correctly. Any known solution to something like this?</p>