AngularJS - How to work with multiple ng-repeat-end

Question

I'm trying to understand how I can work with multiple ng-repeat-end's.

I have a table that shows 20 years worth of data, split into 5 year chunks.

Each row on the table displays 5 years worth of data. This is how I am displaying the first 1-5 years.

<table>
    <tbody>
        <tr ng-repeat="history in HistoryCategory.Category[key]">
            <th>{{ history.CompanyName }} 1-5 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td>                
        </tr>
    </tbody>
</table>
<div ng-repeat-end class="scroll-btns">
    <div class="scroll-btns">
        <div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
        <div class="scroll-right icon-right" ng-click="scrollRight()"></div>
    </div>
</div>

At the bottom of the table is a DIV with class scroll-btns.. All this does is allow the above table to be scrollable and shows some icons to move left/right.

What I am trying to do now, is show year 6-10, 11-15 & 16-20 (in the same table). I have tried:

<table>
    <tbody>
        <tr ng-repeat-start="history in HistoryCategory.Category[key]">
            <th>{{ history.CompanyName }} 1-5 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td>
            <td ng-repeat="emptyCell in getEmptyCells(history.Histories.slice(0, 5).length)"></td>
        </tr>
        <tr ng-repeat-end>
            <th>6 - 10 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(5, 10)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td>      
        </tr>
        <tr ng-repeat-end>
            <th>11 - 15 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(10, 15)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td> 
        </tr>
    </tbody>
</table>
<div ng-repeat-end class="scroll-btns">
    <div class="scroll-btns">
        <div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
        <div class="scroll-right icon-right" ng-click="scrollRight()"></div>
    </div>
</div>

With the above I am seeing a ng-repeat-start/end error and the text 6-10years and 11-15years are not displaying.

However, if I only have the one ng-repeat-end (for example for 6-10years) and not the second, the application displays as expected.

---

**** RESOLVED ****

Resolved by having 2 tags... One with ng-repeat-start, and the other with ng-repeat-end. The tag with ng-repeat-end contains all rows that are 5+ years.

Answer 1

This

<tr ng-repeat-start="item in items"></tr>
<tr></tr>
<tr></tr>
<tr ng-repeat-end></tr>

will give you four tr's for each item.