How to use $index in ng-repeat angular js

Pretty simple really. You can even use it in combination with custom directives etc. Its basically an index of where you are in the loop.

There are some flaws with using it though. If your creating an ng-repeat list, and then passing the $index into some click function or something, then you can have issues if your also using filtering on that same list. The $index can fall out of sync with the filters and leave you wondering why its giving you wrong data.

for example:

<li ng-repeat="page in links | someFilter:filter">
    <a ng-click="someFunction($index)">{{ someData }}</a>
</li>

vs the better way of:

<li ng-repeat="itemX in someData | someFilter:filter">
    <a ng-click="someFunction(itemX)">{{ itemX.name }}</a>
</li>

So although I use the $index in my example below, its often best just to pass the whole object in when doing more complex functions per row.

HTML:

<div ng-app="myApp" ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="page in links">
            <a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }}</a>
        </li>
    </ul>
</div>

Javascript:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
    $scope.links = [
        'Link One',
        'Link Two',
        'Link Three'
    ];

    $scope.pageNumber = 0;
    $scope.setPageNumber = function(index) {
        $scope.pageNumber = index;
    }
});

CSS:

.testClass {
    background: black;
    color: white;
}

This is a sample of how it could be written, although using $index is just fine. Might I suggest using something else like the element id or title, here is an article that talks about ng-repeat.

<div class="favorite-children" ng-repeat="photo in ctrl.favorties track by $index">
    <div class="card"></div>
</div>

  //or

<div class="favorite-children" ng-repeat="photo in ctrl.favorties track by photo.title">
  <div class="card"></div>
</div>

Update

Try this FIDDLE for a preview of a comprehensive JSON, with your same code previewed on how you can use it. Hope it helps.