AngularJS/Bootstrap color cells on conditon - html

Question

I have a bootstrap table which contains various data. I want the last cell of a row to be colored in a special color if a certain argument equals a string.
So the code I use now looks like this:
<tr ng-repeat="data in responseData">
<td>{{data.title}}</td>
<td>{{data.description}}</td>
...
<td class="status" ng-class="{ 'available': data.status=='string1', 'taken': data.status!='string1'}"></td>
</tr>
And the css file:
.status{
padding:1px !important;
width:10px;
}
.status_available{
background-color: green;
}
.status_taken{
background-color:red;
width:10px;
height:100%;
}
But the td isn't colored in the initialized values. I use Chrome, and the developer tools show that the right class is on the td, but as mentioned the color is the standard one.
Can anyone please help me?

Answer 1

According to your css it should be:
<td class="status" ng-class="{ 'status_available': data.status=='string1', 'status_taken': data.status!='string1'}"></td>
or change you css to:
.status.available{
background-color: green;
}
.status.taken{
background-color:red;
width:10px;
height:100%;
}

Answer 2

Bad thing but - you can force it just by applying " !important" to your css rules like
background-color: red !important;
Probably some bootstrap styles are applied after you styles.