title: How to highlight a selected row in ngRepeat?
body: <p>I couldn't find something that will help me to solve this simple issue
  in Angular. All the answers are relevant for navigation bars when a comparison
  is being made against location path.</p>
  
  <p>I've built a dynamic table using list and <code>ngRepeat</code>. When I click a row I'm trying to assign this row a css class, selected, to highlight the fact that this row has been selected by user, and remove the <code>.selected</code> from previously highlighted row.</p>
  
  <p>I'm missing the method to bind between the row that been selected and the css class assignment. </p>
  
  <p>I applied on each <code>row</code> (<code>ul</code>) <code>ng-click="setSelected()"</code>
  But I'm missing the logic inside the <code>function</code> to apply the changes.</p>
  
  <p><a href="http://plnkr.co/edit/gIeHOFdiDMoJcvBhxcCD?p=preview">My Code - Plunk</a></p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>var webApp = angular.module('webApp', []);
  
  //controllers
  webApp.controller ('VotesCtrl', function ($scope, Votes) {
      $scope.votes  = Votes;
      $scope.statuses = ["Approved","Pending","Trash","Spam"];
  
      $scope.setSelected = function() {
         console.log("show");
  
      }
  });
  
  //services
  webApp.factory('Votes', [function() {
  
      //temporary repository till integration with DB this will be translated into restful get query
      var votes = [
          {
              id: '1',
              created: 1381583344653,
              updated: '222212',
              ratingID: '3',
              rate: 5,
              ip: '198.168.0.0',
              status: 'Pending',
          },
          {
              id: '111',
              created: 1381583344653,
              updated: '222212',
              ratingID: '4',
              rate: 5,
              ip: '198.168.0.1',
              status: 'Spam'    
  
          },
          {
              id: '2',
              created: 1382387322693,
              updated: '222212',
              ratingID: '3',
              rate: 1,
              ip: '198.168.0.2',
              status: 'Approved'
  
          },
          {
  
              id: '4',
              created: 1382387322693,
              updated: '222212',
              ratingID: '3',
              rate: 1,
              ip: '198.168.0.3',
              status: 'Spam'
          }
      ];
  
      return votes;
  }]);
  </code></pre>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>  &lt;body ng-controller='VotesCtrl'&gt;
      &lt;div&gt;
      &lt;ul&gt;
          &lt;li class="created"&gt;
              &lt;a&gt;CREATED&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="ip"&gt;
              &lt;b&gt;IP ADDRESS&lt;/b&gt;
          &lt;/li&gt;
          &lt;li class="status"&gt;
              &lt;b&gt;STATUS&lt;/b&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul ng-repeat="vote in votes" ng-click="setSelected()"&gt;
          &lt;li  class="created"&gt;
            {{vote.created|date}}
          &lt;/li&gt;
          &lt;li class="ip"&gt;
              {{vote.ip}}
          &lt;/li&gt;
          &lt;li class="status"&gt;
              {{vote.status}}
          &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
     &lt;/body&gt;
  </code></pre>
  
  <p>My CSS (Only selected class):</p>
  
  <pre><code>.selected {
    background-color: red;
  }
  </code></pre>