title: Angularjs - using orderby filter in the controller's scope
body: <p>I have an array of objects i.e. filtered and paged and now I would like to order the list items by different object attributes.</p>
  
  <p>I tried the <code>orderBy</code> filter as follows:</p>
  
  <pre><code>&lt;th&gt;&lt;a href='' ng-click="reverse = sortParam == 'title' &amp;&amp; !reverse; sortParam = 'title'"&gt;Title&lt;/a&gt;&lt;/th&gt;
  
  &lt;tr ng-repeat="item in pagedItems|filter:filterParam|orderBy:sortParam:reverse"&gt;
      &lt;td&gt;{{ item.title }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This seems to be working fine, clicking on the <code>Title</code> link, orders the row alphabetically or reverse alphabetically depending on the current state.</p>
  
  <p>But the problem here is that only the <code>pagedItems</code> are being ordered, which makes sense as we are applying the <code>orderBy</code> filter to the <code>pagedItems</code>. What I want to achieve is to order the whole set of items (not just currently paged items) to be ordered when the filter is applied.</p>
  
  <p>In order to achieve this I thought i'd use a method in the controller scope. so I changed the above to:</p>
  
  <pre><code>/** In the Template */
  
  &lt;th&gt;&lt;a href='' ng-click="sortItems('title')"&gt;Title&lt;/a&gt;&lt;/th&gt;
  
  &lt;tr ng-repeat="item in pagedItems|filter:filterParam"&gt;
      &lt;td&gt;{{ item.title }}&lt;/td&gt;
  &lt;/tr&gt;
  
  
  /** In the Controller */
  
  $scope.sortItems = function(value) {
      $scope.filtered = $filter('orderBy')($scope.filtered, value);
  };
  
  $scope.$watch('currentPage + numPerPage + filtered', function() {
      $scope.pagedItems = getPagedItems($scope, 'filtered');
  });
  </code></pre>
  
  <p>The <code>sortItems</code> method works and changes the order but the items in the view does not get updated as the <code>$watch</code> code is not fired. I assumed that maybe it's not being changed because the data in the <code>$scope.filtered</code> is not being altered and just the indexes are being changed. So I added and empty element at the end of the array:</p>
  
  <pre><code>$scope.sortItems = function(value) {
      $scope.filtered = $filter('orderBy')($scope.filtered, value);
      $scope.filtered.push({});
  };
  </code></pre>
  
  <p>Now, Everything works as expected but I can't keep an empty object in the array as it affects the items, count and data being displayed. So I thought I'd add and remove an empty item. So changed the above to :</p>
  
  <pre><code>$scope.sortItems = function(value) {
      $scope.filtered = $filter('orderBy')($scope.filtered, value);
      $scope.filtered.push({});
      $scope.filtered.pop();
  };
  </code></pre>
  
  <p>But guess what the <code>$watch</code> code not being fired again.</p>
  
  <p><strong>Question</strong></p>
  
  <p>My question is does <code>$watch</code> look for changes in an array based on it's length ? If yes, what is the best possible way to achieve what I'm trying to. Any help would be appreciated.</p>