Ng-class-odd Not Working Properly

So, I have this controller $rootScope.nhCount = 0; angular.forEach(data, function(value, key) { $rootScope.nhCount = $rootScope.nhCount + 1; }); my html tr

Solution 1:

ngClassOdd and ngClassEven directives can be applied only within the scope of an ngRepeat.

So you'd have to write something like this:

<li ng-repeat="item in items">
   <span ng-class-odd="'timeline-inverted'" ng-class-even="'timeline'">
     {{name}}
   </span>
</li>

Also I am not an Angular expert but something looks wrong with your ng-repeat, 2 colons in a row doesn't quite look right; orderBy:'date':true

Solution 2:

use $even and $odd variable

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

app.controller("MyCtrl" , function($scope){
    
   $scope.items = [1,2,3,4,5];
  
  });

.timeline{
  background-color: yellow;
  color : red;
  }
.timeline-inverted{
  background-color: green;
  color : red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
    <li ng-repeat="item in items">
     <span ng-class="{'timeline': $even, 'timeline-inverted': $odd}">
       {{item}}
      </span>
    </li>
  </div>

Solution 3:

I think OrderBy filter is messing up the respective ng-class-odd/ng-class-even

use track by

<li ng-repeat="nhCount in nhCount.data| orderBy:'date':true track by $index">