Estoy tratando de crear una cuadrícula tipo Metro Tile con Angular, para lograr esto quiero que cada una de las baldosas sea de un color diferente. Así que mi plan de acción era crear una función que escogiera al azar un color dentro de un bucle (usandong-repeat). Esto es lo que tengo hasta ahora ...

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

Entonces, como pueden ver, estoy configurando el nombre de la clase con una función llamada RandomColourClass, aquí están los 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();
};

Todo esto funciona bien y los azulejos son de diferentes colores, pero sigo recibiendo el siguiente error

Error: 10 $ digest () iteraciones alcanzadas. ¡Abortando! ".

He echado un vistazo a otras publicaciones sobre el tema, ¡¡pero no puedo entender qué debo cambiar para que funcione !? Cualquier ayuda o dirección sería muy apreciada :)