AngularJS : variable of ng-repeat loop not updating $scope fast enough

Question

I have an item tree in $scope on which I want to iterate with ng-repeat and include a different template according to node type. The tree is something like

$scope.item = {
  ID: 1,
  children: {
    1: {
      ID: 11,
      },
    2: {
      ID: 12,
    }
  },
};

The problem is that when I do something like

<div ng-repeat="item in item.children">
  item.ID : {{item.ID}}
  <div ng-include="showVars(item.ID)"></div>
</div>

the argument of the showVars function is the item.ID value as evaluated in the parent scope, not the subscope created by ng-repeat. When displayed with {{item.ID}}, the value is correct though.

Example in this Fiddle.

My understanding is that the value in the subscope is not updated yet when I call the function, am I right? Is this AngularJS' normal behaviour or a bug?

Edit:

To make it more explicit, in the Fiddle I expect

calling getTemplate with $scope.item.ID = 12 and itemID = 12

instead of

calling getTemplate with $scope.item.ID = 1  and itemID = 12

because ng-repeat is supposed to assign $scope.item with the variable.

Thank you,

Answer 1

This is expected behavior.

When you created the controller's showVars function, you are closing over $scope, which is the scope of the parent controller. So when you reference $scope, you are getting that scope that was injected into the controller.

In other words, $scope doesn't change based on the execution of the function. This is why you want to pass the item into the function as a parameter.

If you want access to the child scope in the function, you can do this using this:

this.item.ID

Here is a working JS Fiddle