Angular.js: $parent.$index lost when using ng-if

[kishanmundha]

My HTML Code

<div>
  <ul>
    <li ng-repeat='parentItem in arr1'>
      <div ng-repeat='childItem in arr2'>
        {{ $parent.$index }} , {{ $index }}
      </div>
    </li>
  </ul>
</div>

Javascript code inside controller

$scope.arr1 = [1,2];
$scope.arr2 = [1,2];

This code giveing me correct answer

0, 0
0, 1
1, 0,
1, 1

But if I use ng-if="true" in child loop then it giving me wrong answer

<div>
  <ul>
    <li ng-repeat='parentItem in arr1'>
      <div ng-repeat='childItem in arr2' ng-if="true">
        {{ $parent.$index }} , {{ $index }}
      </div>
    </li>
  </ul>
</div>

0, 0
1, 1
0, 0
1, 1

This was wrong. It change parent index to child index

Please fix this issue

[gkalpak]

This is not an issue in Angular. This happens (as documented), because ngIf creates a new scope, so $parent does not refer to the scope of the outer ngRepeat.

That is why using $parent is not a good practice here. You could/should use ngInit to create an alias of the parent index, like this:

<li ng-repeat="parentItem in arr1" ng-init="parentIdx = $index">
  <div ng-repeat="childItem in arr2" ng-if="true">
    {{ parentIdx }} , {{ $index }}
  </div>
</li>

Demo

[gkalpak]

BTW, this is a general support question. Such questions should better be directed to the appropriate channels.
GitHub issues are reserved for bug reports and feature requests.

[kishanmundha]

Thanks,

I can use this by ng-init