AngularJS bootstrap class

Question

I have the following angularjs ng-repeat ,column status have three values (Phoned,Active,Waiting)

 <tr ng-repeat="person in persons">                 
 <td>{{person.id}}</td>
 <td>{{person.status}}</td> 
</tr>

I need to apply bootstrap class depending on the value of status,like the following image

Answer 1

You need to use ng-class directive

Markup

<tr ng-repeat="person in persons">                 
   <td>{{person.id}}</td>
   <td ng-class="{'phoned':person.status === 'Phoned',
                  'active':person.status === 'Active',
                  'waiting':person.status === 'Waiting'}">
    {{person.status}}
   </td> 
</tr>

CSS

.phoned{
   background-color: blue;
}
.active{
   background-color: green;
}
.waiting{
   background-color: orange;
}