title: AngularJS - How to work with multiple ng-repeat-end
body: <p>I'm trying to understand how I can work with multiple <code>ng-repeat-end</code>'s.</p>
  
  <p>I have a table that shows 20 years worth of data, split into 5 year chunks.</p>
  
  <p>Each row on the table displays 5 years worth of data. This is how I am displaying the first 1-5 years.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="history in HistoryCategory.Category[key]"&gt;
              &lt;th&gt;{{ history.CompanyName }} 1-5 years&lt;/th&gt;
              &lt;td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status"&gt;
                  &lt;span ng-switch-when="0"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="1"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="2"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="3"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="4"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="null"&gt;null&lt;/span&gt;
                  &lt;span ng-switch-default&gt;Error&lt;/span&gt;
              &lt;/td&gt;                
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div ng-repeat-end class="scroll-btns"&gt;
      &lt;div class="scroll-btns"&gt;
          &lt;div class="scroll-left icon-left" ng-click="scrollLeft()"&gt;&lt;/div&gt;
          &lt;div class="scroll-right icon-right" ng-click="scrollRight()"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At the bottom of the table is a <code>DIV</code> with class <code>scroll-btns</code>.. All this does is allow the above table to be scrollable and shows some icons to move left/right.</p>
  
  <p>What I am trying to do now, is show year 6-10, 11-15 &amp; 16-20 (in the same table). I have tried:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat-start="history in HistoryCategory.Category[key]"&gt;
              &lt;th&gt;{{ history.CompanyName }} 1-5 years&lt;/th&gt;
              &lt;td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status"&gt;
                  &lt;span ng-switch-when="0"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="1"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="2"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="3"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="4"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="null"&gt;null&lt;/span&gt;
                  &lt;span ng-switch-default&gt;Error&lt;/span&gt;
              &lt;/td&gt;
              &lt;td ng-repeat="emptyCell in getEmptyCells(history.Histories.slice(0, 5).length)"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat-end&gt;
              &lt;th&gt;6 - 10 years&lt;/th&gt;
              &lt;td ng-repeat="mycredits in history.Histories.slice(5, 10)" ng-switch="mycredits.Status"&gt;
                  &lt;span ng-switch-when="0"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="1"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="2"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="3"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="4"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="null"&gt;null&lt;/span&gt;
                  &lt;span ng-switch-default&gt;Error&lt;/span&gt;
              &lt;/td&gt;      
          &lt;/tr&gt;
          &lt;tr ng-repeat-end&gt;
              &lt;th&gt;11 - 15 years&lt;/th&gt;
              &lt;td ng-repeat="mycredits in history.Histories.slice(10, 15)" ng-switch="mycredits.Status"&gt;
                  &lt;span ng-switch-when="0"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="1"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="2"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="3"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="4"&gt;Some text&lt;/span&gt;
                  &lt;span ng-switch-when="null"&gt;null&lt;/span&gt;
                  &lt;span ng-switch-default&gt;Error&lt;/span&gt;
              &lt;/td&gt; 
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div ng-repeat-end class="scroll-btns"&gt;
      &lt;div class="scroll-btns"&gt;
          &lt;div class="scroll-left icon-left" ng-click="scrollLeft()"&gt;&lt;/div&gt;
          &lt;div class="scroll-right icon-right" ng-click="scrollRight()"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the above I am seeing a ng-repeat-start/end error and the text 6-10years and 11-15years are not displaying.</p>
  
  <p>However, if I only have the one ng-repeat-end (for example for 6-10years) and not the second, the application displays as expected.</p>
  
  <hr>
  
  <p>**** RESOLVED ****</p>
  
  <p>Resolved by having 2  tags... One with <code>ng-repeat-start</code>, and the other with ng-repeat-end. The tag with <code>ng-repeat-end</code> contains all rows that are 5+ years.</p>