How can I dynamically set css color in angular?

Question

I am writing a list values from a json file to the DOM. I want to set each text object to be a different color. I found some resources for doing this, but I haven't been able to get anything to work.

my js:

.controller("Catalog", function($scope, $interval) {
 $scope.search = "";
 $scope.books = books;
 $scope.reverse = false;
 $scope.list = false;


 for(var i=0; i<10;i++){
  $scope.books[i] = {
  'color': ('#'+Math.floor(Math.random()*16777215).toString(16))
 };
 }
 });

and html:

  <div class="container result">
  <div ng-class="col s12 m6" class="books" ng-repeat="book in books | filter:search | orderBy:'book.doc.name':reverse" > <a href="https://address/{{book.doc.name}}" target="_blank">
      <img ng-class="list ? 'col s1'" alt="Click to read {{book.doc.name}}" title="Click to read {{book.doc.name}}" class="img-thumbnail" /></a>
      <h2 ng-class="list ? 'col s12 m6' ">
      {{book.doc.name}}   
      {{book.doc.languages}}
      </h2> 
      <p ng-class="list ? 'col-md-10' : 'col-md-12'">
     {{book.doc.subjects}}{{book.doc.tags}}</p> 
  </div>

Answer 1

Your books variable that you are assigning to $scope.books is not set.

You can init like this: $scope.books = []; and than use it in ng-repeat like this: {{book.color}} because you are only setting the color on the for loop.

If you have the $scope.books set than you can set the colors for all the books like this:

for (var i = 0; i < books.length; i++) {
    books[i].color = ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

Here is a JSFiddle Demo .