AngularJS: remove item from a list using ngRepeat and ngInit

Question

I use ngRepeat to show items from a list. As recommended by the documentation, I use ngInit to assign the $index variable to an "itemIndex" variable that I refer to inside the loop. Every item is shown with a button that allows me to remove it from the list. Here is an example jsfiddle:

<li ng-repeat="item in list" ng-init="itemIndex = $index"> {{itemIndex}} {{item}} <a href="#" ng-click="removeItem(itemIndex)">remove</a></li>

If I try to remove an item, the itemIndex variable is not updated, so subsequent removals fail. Instead, if i use the $index variable, everything works as expected (here is the same example without the ngInit-ed variable):

<li ng-repeat="item in list">{{$index}} - {{item}} <a href="#" ng-click="removeItem($index)">remove</a></li>

Is this a bug or it is an intended behavior?

Answer 1

This behaviour is intended, ng-init purposely runs only once.

When you look at the ngInit directive, (https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInit.js) you can see that the $evaluation of the script passed to ng-init is done in the compile function instead of the link function.

var ngInitDirective = ngDirective({
  priority: 450,
  compile: function() {
    return {
      pre: function(scope, element, attrs) {
        scope.$eval(attrs.ngInit);
      }
    };
  }
});

Compile is only executed only once in your applications lifetime, whereas link is executed every time the directive is linked to an element/your document.