title: Sorting of uI grid column containing Angular filter
body: <p>I have recently started using Angular ui-grid. I am not very well versed with the internals of the library.</p>
  
  <p>I had a <code>ui-grid</code> column that required to display percentages. SO I added the following filter to my <code>app</code> and used it along with <code>ui-grid</code> <code>cellFilter</code> property.</p>
  
  <pre><code>module.filter('percentage', function () {
      return function (input) {
          if (!input) {
              return '';
          } else {
              return input + '%';
          }
      };
  })
  </code></pre>
  
  <p>This worked fine, but while sorting this column. The sorting works unexpectedly. Suppose if I have 3 rows with values <code>100,200,300</code>. I expect it can have only two sorted states <code>100,200,300</code> and <code>300,200,100</code>. But if I keep clicking the header of this column I get a third state as <code>200, 300, 100</code> or as <code>100, 300,200</code>. I am even not sure what the pattern is for this state.</p>
  
  <p>If I am right, The angular filter works only on the <code>views</code> and do not impact model of the field. So I do not think adding <code>filter</code> can have an impact on sorting.</p>
  
  <p>Apart from that the two expected sorting (ASCENDING, DESCENDING) appears perfectly, the only problem being the appearance of third. How do I resolve this issue.</p>
  
  <p>Am I missing any implementation ?? Kindly help me resolve this.</p>
  
  <p>Edit: This issue occurs for string column as well. In my understanding there can only be one ASCENDING and one DESCENDING state as far as sorting is considered. But I get more arrangements.  </p>