Eu estou tentando criar uma grade do tipo Metro Tile com Angular, para conseguir isso eu quero cada um dos azulejos para ser uma cor diferente. Então, meu plano de ação era criar uma função que escolhesse aleatoriamente uma cor dentro de um loop (usandong-repeat). Aqui está o que eu tenho até agora ....

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

Então, como você pode ver, eu estou configurando o nome da classe com uma função chamada RandomColourClass. Aqui estão os bits 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();
};

Isso tudo funciona bem e os azulejos são de cores diferentes, mas eu continuo recebendo o seguinte erro

Erro: 10 $ digest () iterações alcançadas. Abortando!

Eu dei uma olhada em outros posts em torno do problema, mas eu não consigo descobrir o que eu preciso mudar para fazê-lo funcionar!? Qualquer ajuda ou direção seria muito apreciada :)