title: Change cell color via ng-click
body: <p>I have change color of my cell when I click in my button but when I click second time my color cell is not keep.</p>
  
  <p>I wish that when I click a second time on another button my first cell keeps color</p>
  
  <p><strong><em>First click:</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/B1HKv.png" alt="enter image description here"></p>
  
  <p><strong><em>Second click:</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/goq24.png" alt="enter image description here"></p>
  
  <p><strong><em>HTML:</em></strong></p>
  
  <pre><code>&lt;table class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
      &lt;tr class="warning"&gt;
          &lt;th&gt;Key&lt;/th&gt;
          &lt;th&gt;Valeur version {{application.version}}&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Valeur version {{applicationcible.version}}&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody ng-repeat="group in groups"&gt;
      &lt;tr&gt;
          &lt;td class="danger" colspan="4" ng-click="hideGroup = !hideGroup"&gt;
              &lt;a href="" ng-click="group.$hideRows = !group.$hideRows"&gt;
                  &lt;span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"&gt;&lt;/span&gt;
                  &lt;strong&gt;{{group.name}}&lt;/strong&gt;
              &lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat-start="member in group.members" ng-hide="hideGroup"&gt;
          &lt;td rowspan="2"&gt;
                  {{ member.name }}
          &lt;/td&gt;
          &lt;td rowspan="2" ng-class="{selected: $index==selectedRowLeft}"&gt;{{ member.valueRef }}&lt;/td&gt;
          &lt;td class="cube" &gt;
              &lt;div  ng-if="group.id != 1"&gt;
                  &lt;button type="button"  ng-click="moveLeft($index, group)" &gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/button&gt;
               &lt;/div&gt;
          &lt;/td&gt;
          &lt;td rowspan="2" ng-class="{selected: $index==selectedRowRight}"&gt;{{ member.valueCible }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat-end ng-hide="hideGroup" &gt;
          &lt;td class="cube" &gt;
              &lt;div ng-if="group.id != 2"&gt;
                  &lt;button type="button"  ng-click="moveRight($index, group)"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/button&gt;
               &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong><em>CSS:</em></strong></p>
  
  <pre><code>.selected { background-color: #ffff05; }
  </code></pre>
  
  <p><strong><em>JS:</em></strong></p>
  
  <pre><code>scope.moveLeft = function (index, group) {
                  move(scope.properties, group.id, index, 'left');
              };
  
              scope.moveRight = function (index, group) {
                  move(scope.propertiescible, group.id, index, 'right');
              };
  
              var move = function (properties, groupId, origin, destination) {
                  unregister();
                  var value;
                  if (destination === 'right') {
                      scope.selectedRowRight = origin;
                  } else {
                      scope.selectedRowLeft = origin;
                  }
  ...
  </code></pre>