How to update html element in ng-repeat collection every second automatically - angularjs

Question

In my controller I have a function that receives data from API every 2 seconds($interval). This data is rendered and displayed to user. When I get positive numbers from my API I want to set background color in HTML to green for 1 second and return it to original color. If it is negative, set background color to red for 1 second, and so on...
controller.js
function checkForUpdatedIndices(){
dataService.getIndices().then(function(res){
$scope.recentIndeces = res.data;
});}
var indicesTimer = setInterval(checkForUpdatedIndices,2000);
checkForUpdatedIndices();
My HTML:
<ul id="ctr_indices">
<li class="cl_indeces" ng-repeat="i in recentIndeces track by $index">
<span class="itemname">{{i.itemName}}</span>
<span class="itemlastvalue">{{i.itemLastValue}}</span>
<span class="itemchange">{{i.itemChange}}</span>
<span class="itempercentage">{{i.itemPercentageChange}}</span>
</li>
</ul>
When i.itemLastValue contains "+" I want to see it green for 1 second and after that change it back to original color.
Thanks in advance

Answer 1

you can do this using ng-style directive. set this style like this
ng-style="{'background-color' : i.color}"
and call a function inside ng-init and pass the item as a parameter
<span class="itemlastvalue" ng-style="{'background-color' : i.color}" ng-init="setColor(i)">{{i.itemLastValue}}</span>
In the function assign the color according to the condition and use timeout function to reverse it to the original value
$scope.setColor = function(i){
if( i.itemLastValue == "+"){
i.color = 'green'
}
else if( i.itemLastValue == "-"){
i.color = 'red'
}
$timeout(function(){
i.color = "white" // what ever the original value
},1000)
}
UPDATED
the second scenario is removing the ng-init function and call the function inside checkForUpdatedIndices
function checkForUpdatedIndices(){
dataService.getIndices().then(function(res){
$scope.recentIndeces = res.data;
setColor()
});
}
function setColor(){
var backUp = angular.copy($scope.recentIndeces);
for(var i=0; i<= $scope.recentIndeces.length-1; i++){
if( $scope.recentIndeces[i].itemLastValue == "+"){
$scope.recentIndeces[i].color = 'green'
}
else if( $scope.recentIndeces[i].itemLastValue == "-"){
$scope.recentIndeces[i].color = 'red'
}
}
$timeout(function(){
$scope.recentIndeces = angular.copy(backUp);
},1000)
}