Angular ng-repeat $index doesn't work in ng-if directive on mozilla firefox

Question

I am making use of ng-repeat to display items in an array. For each item, i check that the $index satisfies a condition.

In chrome and even Internet Explorer, this works perfectly without a hitch. However, in Mozilla, it seems to update the $index only after the ng-repeat is concluded. So, the conditions do not work a lot of the time. An example of such conditions is:

<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="img.first == true">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>

In response to Lorenzo's answer, i have also tried

<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index == 0">
    <img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
<div class="item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index > 0">
    <img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>

I am almost going mad here ... Please help

Answer 1

it's not a good idea to use ng-repeat and ng-if on the same element. both create their own scope, hence it is not recommended to do so.

generally speaking it's a good idea to avoid using other directives in combination with ng-repeat on the same element whenever possible. you should create a child element withing the ng-repeat element and put other directives on that child element instead.