title: Angular toggle table row ng-class with ng-repeat
body: <p>This seems not to be working for me. I've a <code>ng-repeat</code>,<code>ng-click</code> and <code>ng-class</code> on the <code>tr</code>. Clicking on the tr should toggle the class to <code>.error</code>. </p>
  
  <p>Currently clicking a <code>tr</code> will change the class of all the table rows.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="studentApp"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;style&gt;
          .is-grey-true { background-color: #ccc; }
          .error { background-color: red; }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="StudentController"&gt;
  
      &lt;table ng-hide="showTable"&gt;
          &lt;tr ng-repeat="student in students" ng-class="{error : isGrey}" ng-click="toggleClass()"&gt;
              &lt;td&gt;{{student.id}}&lt;/td&gt;
              &lt;td&gt;{{student.firstname}}&lt;/td&gt;
              &lt;td&gt;{{student.lastname}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;script type="text/javascript"&gt;
      var studentApp = angular.module('studentApp',[]);
  
      studentApp.controller('StudentController', function($scope){
          var students = [
              { id:1, firstname: 'Mahesh', lastname: 'Sapkal'},
              { id:2, firstname: 'Hardik', lastname: 'Joshi'},
              { id:3, firstname: 'Sagar', lastname: 'Mhatre'}
          ];
          $scope.isGrey = false;
  
          $scope.toggleClass = function () {
              $scope.isGrey = true;
          };
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Jhz4D/" rel="noreferrer"><strong>JSFiddle</strong></a></p>