title: change css of single cell(td) in table angularjs
body: <p><strong>Problem:</strong> Using AngularJS, I need to change the color(or we can say CSS) of a single cell(td) on which user has clicked. </p>
  
  <p>For now to simplify the use case, just want to change color of all table cells where we have zero</p>
  
  <p>Below is the code which I have tried, but its changing the color of all the cells in table.</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr ng-repeat="row in tableType.data.rows track by $index"&gt;
            &lt;td ng-repeat="col in row track by $index" &gt;
              &lt;span id={{col}} ng-class='cellColor' ng-click='updateCellColor(col)'&gt;{{col}}&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p><strong>Contoller</strong></p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
    $scope.tableType = {
      data: {
        rows: [
          ["69123", 20, 20, 40, 0, 0, 0, 0, 20, 20, 20, 0, 20, 20, 0, 20],
          ["69121", 20, 20, 40, 0, 0, 0, 20, 20, 40, 20, 0, 20, 20, 0, 20],
          ["69124", 20, 20, 40, 0, 0, 0, 0, 0, 0, 20, 0, 20, 0, 0, 0],
          ["69221", 20, 20, 40, 20, 0, 20, 0, 0, 0, 20, 0, 20, 20, 20, 40]
        ]
      }
    };
  
    $scope.cellColor = "blue";
  
    $scope.updateCellColor = function(col){
      if(parseInt(col)===parseInt(0)){
          alert('changing color to red');
          $scope.cellColor = "red";
      }else{
          alert('changing color to yellow');
          $scope.cellColor = "yellow";
      }
    };
  
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.red{
      color:red;
  }
  
  .blue{
      color:blue;
  }
  
  .yellow{
      color:yellow;
  }
  </code></pre>