Я пытаюсь создать сетку типа Metro Tile с Angular, чтобы добиться этого, я хочу, чтобы каждая плитка была разного цвета. Так что мой план действий состоял в том, чтобы создать функцию, которая будет случайным образом выбирать цвет внутри цикла (используяng-repeat). Вот то, что я имею до сих пор ....

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

Итак, как вы можете видеть, я устанавливаю имя класса с помощью функции под названием RandomColourClass, вот биты 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();
};

Это все работает нормально, и плитки имеют разные цвета, но я продолжаю получать следующую ошибку

Ошибка: достигнуто 10 $ digest (). Aborting!».

Я посмотрел другие посты вокруг этой проблемы, но я не могу понять, что мне нужно изменить, чтобы это заработало !? Любая помощь или направление будет принята с благодарностью :)