title: How to update only one column icon in table in angularjs?
body: <p>I try to improve Table view by use angularjs only. (Without add/remove class)</p>
  
  <p>Here is example:  <a href="http://plnkr.co/edit/hB1yzCr16RAyDCdZwRKx?p=preview" rel="nofollow">Plunker</a>.</p>
  
  <p>I want my table to be dynamic, it means that I don't know how many columns it has, therefore I use <code>ng-repeat</code>.</p>
  
  <p>To that example I added: </p>
  
  <pre><code>$scope.headers = ['ProgramCode','ProgramGroup','EventCode','StartDate','FormalDate','LocCity','LocState','LocAddress', 'LocName','Price', 'LicenseeURL','GateKeeper_length','GateKeeperHTML','SeatsAreAvailable','LocLatitude','LocLongitude','EventType',"LocationUnivURL","UnivCourseNumber","UnivCourseType","UnivFaculty","Course_Type","cls"];
  </code></pre>
  
  <p>On start, instead <code>$scope.reverse = false;</code> I wrote <code>$scope.reverse = undefined;</code></p>
  
  <p>And now the header I can write like:</p>
  
  <pre><code>    &lt;th ng-repeat="header in headers"&gt;{{ header }}
             &lt;a ng-click="sort_by(header)"&gt;
               &lt;i ng-class="{
                     'icon-sort':reverse == undefined,
                     'icon-chevron-up': reverse,
                     'icon-chevron-down': !reverse
                      }"&gt;
               &lt;/i&gt;                                
              &lt;/a&gt;
     &lt;/th&gt;
  </code></pre>
  
  <p>I changed <code>sort_by</code> method that looks like:</p>
  
  <pre><code> $scope.sort_by = function(newSortingOrder) {   
    $scope.reverse = !$scope.reverse;   
   }; 
  </code></pre>
  
  <p>However, when I press on down/up button to activate sorter, it updates all icons in all columns like in followed example: <a href="http://plnkr.co/edit/Nsopwka4UOekUAUU7E2U?p=preview" rel="nofollow">updated_Plunker</a> </p>
  
  <p>Well, i have only one flag <code>reverse</code> for all columns. Do I need create list of flags or <code>angularjs</code> has other technique?</p>