ng-model won't reflect changes?

Question

I have built a simple shopping cart sample :

Those 3 lines are created via ng-repeat .

My goal :

I want the yellow part to become red when the relevant quantity ( red arrow) is more than 3 .

So here is what I did : ( http://jsbin.com/eXOgOpA/4/edit )

<div ng-repeat='item in items'>
    <span ng-class='{isMoreThan3: IsMoreThan3()}'>{{item.title }}</span>
    <input ng-model='item.quantity'>
    ...
</div>

Where IsMoreThan3 is a function which :

$scope.IsMoreThan3=function (){return $scope.item.quantity>3;};

Where

.isMoreThan3
{
  color:red;
}

but it doesn't work. ( calculations are ok , but the color is never red).

Question :

How can I fix my controller code to yield the right value for the model ?

In other words :

How can the controller , know the current item.quantity ?

nb I know that I can put the logic into the markup But I don't want that. I want the controller to return a true/false value.

Answer 1

Try:

<span ng-class='{isMoreThan3: IsMoreThan3(item)}'>{{item.title }}</span>

JS:

$scope.IsMoreThan3=function (item){
     return item.quantity>3;
};

The reason is ng-repeat will create its own scope , accessing $scope.item will not access the current item in the loop