How to keep tracking ng-repeat + ng-if counter manually

Question

I currently have the following general loop

<div ng-repeat=
    <li ng-if=
        --> {{$index}} </br>

Use is $indexnot suitable for my need as it will print

--> 1
--> 2
--> 5
--> 9
...

I want to print

--> 1
--> 2
--> 3
--> 4
...

How can I track the counter manually?

Answer 1

Instead of using ng-repeatand ng-ifuse ng-repeatwith a filter, and then the index $ index will show the desired values.

HTML:

<div ng-app="app">
  <div ng-controller="ctrl as vm">
    <span>Your Approach:</span>
    <div ng-repeat="item in vm.items">
      <div ng-if="item > 5">
        <span>Item: {{item}}. $index: {{$index}}</span>
      </div>
    </div>
    <br/>
    <span>Filter Approach:</span>
    <div ng-repeat="item in vm.items | filter:vm.greaterThanFiveFilter">
      <span>Item: {{item}}. $index: {{$index}}</span>
    </div>
  </div>
</div>

JS:

angular.module('app', []).
controller('ctrl', function() {
  this.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  this.greaterThanFiveFilter = function(item){ return item > 5};
});

CONCLUSION:

Your Approach:
Item: 6. $index: 5
Item: 7. $index: 6
Item: 8. $index: 7
Item: 9. $index: 8

Filter Approach:
Item: 6. $index: 0
Item: 7. $index: 1
Item: 8. $index: 2
Item: 9. $index: 3

JSFIDDLE .