AngularJS: function call with ng-class - angularjs

Question

i am calling a function from ng class because i want to return class name dynamically based on price.
i have 6 data and function suppose to call 6 times but when i run the code then i saw it is calling 12 times.....anyone can see the code and tell me why the function is getting called 12 time instead of 6.
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-class="setColor(item.price)" ng-repeat="item in products">{{item.name}} — {{item.price}}</li>
</ul>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.setColor = function(price) {
alert(price);
}
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
}
]
})
here is jsfiddle https://jsfiddle.net/tridip/ob8jh2o7/1/
UPDATE : My Objective
if price less than 50 then item color should be red. if price more than 50 then item color should be yellow and if price more than (50+(50*60/100)) then item color should be green. now tell me how could i achieve it with less iteration. guide me with best approach to complete it.
thanks
if fix it. here is my new fiddle link https://jsfiddle.net/tridip/ob8jh2o7/22/

Answer 1

Based on Using ng-class with a function call - called multiple times
You can try something like this if you are just modifying the class:
var colourMap = {
"30.99": "speciality1Class",
"99.99": "speciality2Class",
"50": "speciality3Class",
"79.99": "speciality4Class",
"20.99": "speciality5Class"
};
$scope.setColor = function(price) {
return colourMap[price];
}
fiddle: https://jsfiddle.net/ob8jh2o7/11/
However, if you are using an alert or log it is going to be called all those times because angulars use of dirty checking. If you are trying to fire an alert though, I would not use ng-class. You can read more about angulars dirty checking here - https://docs.angularjs.org/guide/scope#scope-life-cycle .

Answer 2

Angularjs uses a dirty-check approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
The first call is from the watchers that are detecting the change. Because there is one then they need to be called again to see if is there news changes because a watcher can make changes.

Answer 3

<li ng-class="{red : item.price <= 50 , yellow: item.price > 50 && item.price <= 50 + 50*0.6, green: item.price > 50 + 50*0.6}" ng-repeat="item in products track by $index">{{item.name}} — {{item.price}}</li>
Edited Fiddle working: https://jsfiddle.net/ob8jh2o7/21/