javascript - Change color of li element based on array of strings -

in view have list of statuses.

<ul>     <li>first_status</li>     <li>second_status</li>     <li>third_status</li> </ul> 

in model controller retrieve updated statuses each second:

    $interval(function () {             $scope.bad_statuses = model.getstatuses({id: $scope.somemodel.id});     }, 1000); 

$scope.statuses array of bad statuses, example $scope.bad_statuses[0] = first_status. if status exists in $scope.bad_statuses, want color red, otherwise - green.

so basically, somehow need retrieve each <li> value , based on condition if content li existst in $scope.bad_statuses array, color green or red.

how should approach problem? im new angularjs.

i made plunkr you, should work :)

https://plnkr.co/edit/op66yub5lxbs5ucmtbrh?p=preview

javascript code:

var app = angular.module('plunker', []);  app.controller('mainctrl', function($scope, $interval) {   $scope.name = 'world';   $scope.bad_statuses = ["first_status", "third_status"];   $interval(function () {             var lis = document.getelementbyid("list").getelementsbytagname("li");             angular.foreach(lis, function(value, key){                if($scope.bad_statuses.indexof(value.innerhtml) > -1){                  console.log("red");                  value.style.color = 'red';                }                else{                  console.log("green");                  value.style.color = 'green';                }             });    }, 1000); });