NG class demo

HTML

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <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}} &mdash; {{item.price}}</li>
  </ul>
</div>

CSS

@import "compass/css3";

div {
  width: 300px;
}

li.red{
  color: red;
}
li.green{
  color: green;
}
li.yellow{
  color: yellow;
}
.clearance {
  color: red;
  background: yellow;
  border-top: 2px solid orange;
}

.clearance:after {
  content: " on clearance!";
  font-weight: bold;
  font-style: italic;
}

.new {
  font-weight: bold;
  color: blue;
}

.new:after {
  content: " new!"
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
var times = 0;
$scope.setColor = function(price) {

     console.log(price, ++times);
}   
  
  $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,
  	}
	]
})