title: Change TH color via ng-click
body: <p>I want change color of my cell when I click in my <code>th</code> but when I click  my color is not keep.</p>
  
  <p>I wish that when I click a second time on another button my first <code>th</code> don't keeps color</p>
  
  <p><strong><em>HTML:</em></strong></p>
  
  <pre><code>    ....
  
  
  
   &lt;script type="text/ng-template" id="custom-footer" &gt;
          &lt;div&gt;
              &lt;table cellspacing="0" cellpadding="0" ng-controller="SearchController"
                     style="border:solid 1px black; font-family:verdana; font-size:12px;"&gt;
                  &lt;thead&gt;
                  &lt;tr style="background-color:lightgrey;"&gt;
                      &lt;th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('0')"&gt;Journée&lt;/th&gt;
                      &lt;th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('1')"&gt;Matin&lt;/th&gt;
                      &lt;th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('2')"&gt;Midi&lt;/th&gt;
                      &lt;th style="width:20px;" ng-class="{'selected'}" ng-click="changeTime('3')"&gt;Soir&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  {{test}}
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/script&gt;
      &lt;div class="ui-datepicker-calendar columns small-3"&gt;
          &lt;input type="text" ng-model="goDate" ng-click="updateDatePicker()"
                 placeholder="Date d'aller" datepicker/&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>Controller:</em></strong></p>
  
  <pre><code>angular.module('matrixarSearch', [
      'mm.foundation',
      'matrixarAutocomplete',
      'matrixarCalendar'
  ]).controller('SearchController', function ($scope, $translate) {
  
      var init = function(){
          $scope.time='';
  
  
          $scope.changeTime = function(val){
              $scope.time = val;
              console.log($scope);
          };
  });
  </code></pre>
  
  <p><strong><em>Directive:</em></strong></p>
  
  <pre><code>(function () {
      var mod = angular.module('matrixarCalendar', []);
  
      mod.directive('datepicker', function ($compile) {
          return {
              restrict: 'A',
              require: 'ngModel',
              link: function (scope, elem, attrs, ngModelCtrl) {
                  var updateModel = function (dateText) {
                      // call $apply to bring stuff to angular model
                      scope.$apply(function () {
                          ngModelCtrl.$setViewValue(dateText);
                      });
  
                  };
  
                  scope.updateDatePicker = function () {
                      $compile($.datepicker.dpDiv.append($('#custom-footer').contents().text()))(scope);
                   };
                  var options = {
                      dateFormat: 'dd/mm/yy',
                      numberOfMonths: 2,
                      autoSize: true,
                      autoclose: true,
                      minDate: new Date(),
                      onSelect: function (dateText) {
                          updateModel(dateText);
                      }
                  };
                  elem.datepicker(options);
              }
          };
      });
  }());
  </code></pre>
  
  <p><strong><em>CSS:</em></strong></p>
  
  <pre><code>.selected {
      background: red;
  }
  </code></pre>