Strange array behaviour with Angular

Question

I have a two dimensional array in controller:

var MainController = function($scope) {
    $scope.board = [[1, 2, 3, 4],
                    [5, 6, 7, 8],
                    [9, 10, 11, 12],
                    [13, 14, 15, 16]];
};

And I want to display it as table:

<table>
    <tr ng-repeat="line in board">
        <td ng-repeat="cell in line">
            {{ cell }}
        </td>
    </tr>
</table>

All work fine with this code, but if I change the data in the board to make two identical cells in the line (inner array) - this line disappear. So if I change controller to:

    $scope.board = [[1, 2, 3, 4],
                    [5, 6, 7, 7],
                    [9, 10, 11, 12],
                    [13, 14, 15, 16]];

the second line disappear.

Why and how can I fix it?

Answer 1

It sees the identical values as duplicates. Modify your view by adding track by syntax as follows

<table>
    <tr ng-repeat="line in board track by $index">
        <td ng-repeat="cell in line track by $index">
            {{ cell }}
        </td>
    </tr>
</table>

This

will cause the items to be keyed by their position in the array instead of their value

See Duplicate Key in Repeater