AngularJS: setting class dynamically based on time difference

Question

i am comparing time time and based on that i am setting css class name but i made some mistake and that is why code is not working. please anyone see my code and tell me where i made the mistake.

<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

    <ul class="nav nav-pills" ng-init="catVal = 1">
       <li ng-repeat="item in products" ng-class="{'css-class-yellow' : moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 60,'css-class-red' : moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 200, 'css-class-green' : moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 300 }">
           <a href="">{{item.name}}</a>
        </li>

     </ul>        
</div>

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.dbTime='12:05:05';

  $scope.products = [{
    'name': 'Xbox',
    'clearance': true,
    'price': 30.99,
    'businessTime':'04:15:22'
  }, {
    'name': 'Xbox 360',
    'clearance': false,
    'salesStatus': 'old',
    'price': 99.99,
    'businessTime':'12:10:22'
  }, {
    'name': 'Xbox One',
    'salesStatus': 'new',
    'price': 50,
    'businessTime':'06:25:22'
  }, {
    'name': 'PS2',
    'clearance': true,
    'price': 79.99,
    'businessTime':'08:11:22'
  }, {
    'name': 'PS3',
    'salesStatus': 'old',
    'price': 99.99,
    'businessTime':'17:41:22'
  }, {
    'name': 'PS4',
    'salesStatus': 'new',
    'price': 20.99,
    'businessTime':'21:05:22'
  }];
  });

.css-class-yellow{
  background-color: yellow;
  }
.css-class-red{
  background-color: red;
  }
.css-class-green{
  background-color: green;
  }

Answer 1

I would propose to move such a complex comparison back to controller:

//template
<li ng-repeat="item in products" ng-class="{'css-class-yellow' : isYellowLess() }">

//controller
$scope.isYellowLess = function(){
  return moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 60;
}

Then you can debug it easier.

UPD

Check the updated fiddle: https://jsfiddle.net/4jz8uh2y/3/

The problem was that you need to do the moment parsing in the controller, not in the template. Since you use plain version of momentjs (not angular-moment), your controller knows nothing about the momentjs functions hence could not evaluate the time comparison properly.