title: How to use ng-repeat in expandable table rows
body: <p>I'm using bootstrap to accomplish expanding table rows. </p>
  
  <p>The format for doing this is:</p>
  
  <pre><code>&lt;tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"&gt;
    &lt;td&gt;one&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="hiddenRow"&gt;
    &lt;div class="accordian-body collapse" id="demo1"&gt;
      &lt;table class="table table-striped"&gt;
       &lt;thead&gt;&lt;tr&gt;&lt;td&gt;Test for row one&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
       &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Testing&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
      &lt;table&gt;
    &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>How can I do ng-repeat over the entire block listed above? </p>
  
  <p>I tried doing </p>
  
  <pre><code>&lt;tr ng-repeat="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle"&gt;
    &lt;td&gt;one&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ng-repeat="x in colors track by $index"&gt;
    &lt;td class="hiddenRow"&gt;
    &lt;div class="accordian-body collapse" id="demo1{{$index}}"&gt;
      &lt;table class="table table-striped"&gt;
       &lt;thead&gt;&lt;tr&gt;&lt;td&gt;Test for row one&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
       &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Testing&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
      &lt;table&gt;
    &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>But this way the rows don't expand right under the one that is clicked. Also, I'm having to do two loops. How can I do this all in one loop?</p>