Ionic ng-class function triggers on all ng-click in app how to solve this

I have an ionic list which uses a function getClass() to get the class name for each iteration. This "getClass()" function is to be triggered when the list get populated but it seems that function is triggered in every ng-click in the app. For example the function is triggered when i clicked the News button above.

The code in Html file is :

<ion-view view-title="News App"  >
  <ion-content>
 <div class="ionic">
        <div class="button-bar bar-energized">
        <a class="button button-raised ink-dark" ng-click="">
        News
        </a>
         <a class="button button-raised ink-dark">
        Features
        </a>           
        </div>
        <div class="content " ng-controller="NewsCtrl">
            <div class="list ">

            <div   ng-repeat="news in newslists" ng-class="getClass()" ng-click="" >

                        <p>{{news.title}}</p>

                </div>
            </div>
        </div>
    </div>
  </ion-content>
</ion-view>

The code in Controllers.js:

    .controller('NewsCtrl', function($scope) {
      var classlist =["class1","class2","class3","class4","class5"]; 
      var classIndex =0;
      var temClass='';
      $scope.newslists = [{....},{...},{...} ]; // array of arrays  with news details
      $scope.getClass =function(){
       temClass = classlist[classIndex];
      classIndex++;
      if(classIndex==5)
      {
      // need to repeat the array if index of ng-repeat is more than 5
      classIndex=0;
      }
      return temClass;
      };
    })

The code works and class get populated along the list but the console gives me following error:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"}],[{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"}],[{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"}],[{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"}],[{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"}]]
http://errors.angularjs.org/1.3.13/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22m…3A%22card%20dark-bg%20in%22%2C%22oldVal%22%3A%22ard%20royal-bg%22%7D%5D%5D
    at REGEX_STRING_REGEXP (ionic.bundle.js:8762)
    at Scope.$get.Scope.$digest (ionic.bundle.js:22980)
    at Scope.$get.Scope.$apply (ionic.bundle.js:23205)
    at done (ionic.bundle.js:18358)
    at completeRequest (ionic.bundle.js:18548)
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:18489)

The above error repeats in every ng- click also.

It seems you've overcomplicated this. No need to jump that many hoops to get the correct class for correct index. Try this code:

<div ng-repeat="news in newslists" ng-class="getClass($index)" ng-click="" >
    <p>{{news.title}}</p>
</div>

And modify your controller as:

.controller('NewsCtrl', function($scope) {
    var classlist =["class1","class2","class3","class4","class5"];
    var classLength = classlist.length;
    $scope.newslists = [{....},{...},{...} ]; // array of arrays  with news details
    $scope.getClass =function(index) {
        return classlist[index % classLength];
    };
})

Angular exposes a special $index variable which contains array index for each element of an ng-repeat directive.