title: Changing color of a div on ng-click and resetting rest all to their normal colors
body: <p>I am trying to change the color of a div on click of <code>ng-click</code>. I have done half of the work.  I am able to toggle the color of the div when clicked, but I need all other divs to revert to their original color.  There should be no more than one div that is not its original color.</p>
  
  <p>HTML code-</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      Hello, {{name}}!
      &lt;div ng-init="item.isyellow = false" ng-repeat="item in realName" 
           ng-class="{yellow : item.isyellow}"  ng-class-odd="'odd'" ng-class-even="'even'" 
           ng-click="item.isyellow =!item.isyellow"  style="cursor:pointer"&gt;
          {{item.id}}
          {{item.name}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS-</p>
  
  <pre><code>.odd{
      background-color:white;  
  }
  .even{  
       background-color:grey;
  }
  .yellow{
       background-color:yellow;
  }
  </code></pre>
  
  <p>Js-</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  function MyCtrl($scope) {
      $scope.name = 'Superhero';
      $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];   
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Rhul/HB7LU/17479/" rel="nofollow">Demo on JsFiddle</a></p>