Используя AngularJS, я перебираю объект JSON, содержащий массив объектов событий, содержащий массив объектов конкуренции.

Я хочу показать каждомуevent в таблице, а затем каждыйcompetition вtd, но только три ячейки в ряду

Я использую ng-repeat, чтобы вернуть список таблиц для каждого события, но у меня возникают проблемы с разделением соревнований на новые<tr> каждые три<td>s

Помимо перестройки собственного массивного объекта из JSON, какой лучший способ сделать то, что я описываю в Angular?

Текущий вид:

<table ng-repeat="listing in listings">
    <tr>
        <th colspan="3">{{listing.name}}</th>
    </tr>
    <tr>
        <td ng-repeat="competition in listing.competitions">
            {{competition.id}} - {{competition.name}}
        </td>
    </tr>
</table>

Желаемый вывод:

<table>
    <tr>
        <th colspan="3">Event Name</th>
    </tr>
    <tr>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
    </tr>
    <tr>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
    </tr>
</table>

контроллер:

app.controller('EventsCtrl', function ($scope, $http) {
  $scope.loading = true;

  $http.get('scripts/JSON/events.json').then(function (response) {
    var listings = response['data'].events;

    $scope.listings = listings;
  });
});

events.json

{
"events": [
    {
        "id": 418,
        "name": "et ullamco",
        "competitions": [
            {
                "id": 933,
                "name": "qui in deserunt occaecat et",
                "startTime": 1381092189
            },
            {
                "id": 853,
                "name": "eu enim ex incididunt do",
                "startTime": 1380708266
            },
            {
                "id": 5738,
                "name": "ad est ut aliquip et",
                "startTime": 1381366623
            },
            {
                "id": 7599,
                "name": "sit ex voluptate aliqua dolor",
                "startTime": 1381284106
            },
            {
                "id": 7481,
                "name": "laborum consequat deserunt do aliqua",
                "startTime": 1380874273
            },
            {
                "id": 3441,
                "name": "amet reprehenderit sint sunt proident",
                "startTime": 1380554850
            },
            {
                "id": 1959,
                "name": "ullamco minim minim in voluptate",
                "startTime": 1380651981
            }
        ]
    },