title: How to achieve dynamic css class in ui-grid that reflects page content changes?
body: <p>My goal is to achieve a dynamic CSS class in ui-grid cells with simplest example being to color gender column or display an icon based on cell's value. The CSS classes would be updated according to current data on the page so if eg. a button is clicked that updates the data bound to the grid the classes would be recalculated.</p>
  
  <p>There is plenty of examples from authors and contributors on dynamic CSS classes eg. <a href="http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed" rel="nofollow">http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed</a> however they only describe a way to conditonally apply a class during page load and what I need is a way to get the behaviour that would reapply the rules on page contents changes as described above the way basic angular ng-class works.</p>
  
  <p>In ui-grid you can use cell templates or cell class mechanisms in column definition but neither seems to work here:</p>
  
  <pre><code> cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (grid.getCellValue(row ,col).toLowerCase() === 'male') {
        return 'blue';
      }
    }
  
  cellTemplate: 
      '&lt;div ng-class="{ blue: \'{{COL_FIELD.sex}}\' == \'male\', 
      green: \'{{COL_FIELD.sex}}\' == \'female\'}"&gt;
      {{ COL_FIELD.first }} {{ COL_FIELD.last }}&lt;/div&gt;' 
  </code></pre>
  
  <p>I created a plunkr with a full example of this problem: <a href="https://plnkr.co/edit/rob144gVQo6uy1AVuJlS" rel="nofollow">https://plnkr.co/edit/rob144gVQo6uy1AVuJlS</a></p>
  
  <p>I also tried calling various refresh methods on grid object and angular's $scope.apply but to no effect.</p>