title: sorting table progress in angular
body: <p>my problem is sorting a table in angular, where I have a column that is displaying progress in x/x, e.g. 3/10</p>
  
  <p>I have a header that changes the sorting column to that column when clicked, but when I click it it does not reverse the sorting as it should.</p>
  
  <p>table:</p>
  
  <pre><code>&lt;table ng-controller="tabledata"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th ng-click="sortcol='name'"&gt;Name
                   &lt;span ng-if="reverse &amp;&amp; sortcol=='name'" ng-click="reverse=!reverse"&gt;▲&lt;/span&gt;
                   &lt;span ng-if="!reverse &amp;&amp; sortcol=='name'" ng-click="reverse=!reverse"&gt;▼&lt;/span&gt;
             &lt;/th&gt;
             &lt;th ng-click="sortcol='progress'"&gt;Progress
                   &lt;span ng-if="reverse &amp;&amp; sortcol=='progress'" ng-click="reverse=!reverse"&gt;▲&lt;/span&gt;
                   &lt;span ng-if="!reverse &amp;&amp; sortcol=='progress'" ng-click="reverse=!reverse"&gt;▼&lt;/span&gt;
             &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="item in items | orderBy:sortcol:reverse"&gt;
              &lt;td&gt;{{item.name}}&lt;/td&gt;
              &lt;td&gt;{{item.progress}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>module.controller('tabledata',['$scope',function($scope){
      $scope.reverse = false;
      $scope.sortcol = 'name';
      $scope.items = [{"name":"item1","progress":"1/20"},{"name":"item2","progress":"5/10"},{"name":"item3","progress":"2/10"}];
  }]);
  </code></pre>
  
  <p>so when it not reversed it should sort:</p>
  
  <p>item1 1/20<br>
  item3 2/10<br>
  item2 5/10</p>
  
  <p>and when reversed:</p>
  
  <p>item2 5/10<br>
  item3 2/10<br>
  item1 1/20</p>
  
  <p>or the other way around, i really don't care</p>
  
  <p>but nothing is changed, and the sort stay the same, reversed or not reversed! (I can get it to sort by name, no problem there)</p>
  
  <p>I have tried to make a function and set ng-click="sortcol='sortPercent'" on the table header, and adding following function to the controller, but the function is never called on click. (I tried adding a console.log in the function and it never displayed).</p>
  
  <pre><code>$scope.sortPercent = function(data){
      var pdata = data.progress.split("/");
      return (pdata[0]-pdata[1]);
   }
  </code></pre>
  
  <p>any help would be appreciated :-)</p>
  
  <p>cheers<br>
  c_bb</p>