title: using class and ng-class together
body: <p>Here I am facing a problem when applying regular element class and ng-class together. In my code ng-class css property depends upon a controller variable whose value changes for every iteration in ng-repeat. The main issue is that for two or more values of 'dependent' variable appearing successively, ng-class property doesn't applies to first value, it retains the previous css property.</p>
  
  <p>If the 'dependent' variable value is equal to 100 should appear in red, else for all other values blue will apply, by selecting ng-class either changeToRed or changeToBlue.
      
      
      </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .simpleCss{
  font-size: 14px;
  }
  .changeToRed{
  color : red;
  }
  .changeToBlue{
  color : blue;
  }
  
  &lt;/style&gt;
  
  &lt;script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  angular.module('test-app', []).controller('testAppCntrl', function($scope){
  
   var objects = [
   {id : 1, start : 10, end : 15},//current = 18
   {id : 2, start : 10, end : 11},
   {id : 3, start : 10, end : 20},
   {id : 4, start : 10, end : 23},
   {id : 5, start : 10, end : 25},
   {id : 6, start : 10, end : 14},
   {id : 7, start : 10, end : 13},
   {id : 8, start : 10, end : 12},
   {id : 9, start : 10, end : 20},
   {id : 10, start : 10, end : 28}
   ];
   $scope.objects = objects;
  
   $scope.calculate = function(start, end, current){//start, end, current
   if(current&lt;end)
   {
      $scope.dependent = ((current-start)/(end-start)) * 100;
   }
   else
      $scope.dependent = 100;
  
   return $scope.dependent;
  }
  
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app='test-app' ng-controller='testAppCntrl'&gt;
  
  &lt;div ng-repeat="obj in objects"&gt;
      &lt;h6 class="simpleCss" ng-class="{{dependent &lt; 100}} ? 'changeToBlue' : 'changeToRed'" &gt; {{calculate(obj.start,obj.end,18)}}&lt;/h6&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hope for the best solution.
  Thank you.</p>