Próbuję utworzyć siatkę typu Metro Tile z Angular, aby to osiągnąć, chcę, aby każda z płytek była innego koloru. Mój plan działania polegał na stworzeniu funkcji, która losowo wybierałaby kolor wewnątrz pętli (używającng-repeat). Oto co mam do tej pory ....

<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText">
  <div  >
    <h6>{{stockRecord.ProductGroupName}}</h6>
  </div>
</div>

Jak widać, ustawiam nazwę klasy funkcją o nazwie RandomColourClass, Oto bity JS

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}];

$scope.RandomColourClass = function(){
  var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)];
  return randomColour.colour.toString();
};

To wszystko działa dobrze, a kafelki mają różne kolory, ale otrzymuję następujący błąd

Błąd: osiągnięto iteracje 10 $ digest (). Przerwanie! ”.

Spojrzałem na inne posty dotyczące tego problemu, ale nie mogę zrozumieć, co muszę zmienić, aby działało !? Jakakolwiek pomoc lub kierunek byłoby bardzo mile widziane :)