Improve this doc View Source

Orders a specified `array` by the `expression` predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted correctly, make sure they are actually being saved as numbers and not strings.

## Usage

### In HTML Template Binding

    {{ orderBy_expression | orderBy : expression : reverse}}

### In JavaScript

    $filter('orderBy')(array, expression, reverse)

### Arguments

Param | Type | Details
--- | --- | ---
array | Array | The array to sort.
expression | function(*)string Array.<(function(*)|string)> | A predicate to be used by the comparator to determine the order of elements. Can be one of: `function`: Getter function. The result of this function will be sorted using the `<`, `=`, `>` operator. `string`: An Angular expression which evaluates to an object to order by, such as 'name' to sort by a property called 'name'. Optionally prefixed with `+` or `-` to control ascending or descending sort order (for example, +name or -name). `Array`: An array of function or string predicates. The first predicate in the array is used for sorting, but when two items are equivalent, the next predicate is used.
reverse (optional) | boolean | Reverse the order of the array.

### Returns

Array | Sorted copy of the source array.

## Example

Edit in Plunker

    <script>
      function Ctrl($scope) {
        $scope.friends =
            [{name:'John', phone:'555-1212', age:10},
             {name:'Mary', phone:'555-9876', age:19},
             {name:'Mike', phone:'555-4321', age:21},
             {name:'Adam', phone:'555-5678', age:35},
             {name:'Julie', phone:'555-8765', age:29}]
        $scope.predicate = '-age';
      }
    </script>
    <div ng-controller="Ctrl">
      <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
      <hr/>
      [ <a href="" ng-click="predicate=''">unsorted</a> ]
      <table class="friend">
        <tr>
          <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
              (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
          <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
          <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>
    </div>

It's also possible to call the orderBy filter manually, by injecting `$filter`, retrieving the filter routine with `$filter('orderBy')`, and calling the returned filter routine with the desired parameters.

Example:

Edit in Plunker

    <div ng-controller="Ctrl">
      <table class="friend">
        <tr>
          <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
            (<a href="" ng-click="order('-name',false)">^</a>)</th>
          <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
          <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
        </tr>
        <tr ng-repeat="friend in friends">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>
    </div>

    function Ctrl($scope, $filter) {
      var orderBy = $filter('orderBy');
      $scope.friends = [
        { name: 'John',    phone: '555-1212',    age: 10 },
        { name: 'Mary',    phone: '555-9876',    age: 19 },
        { name: 'Mike',    phone: '555-4321',    age: 21 },
        { name: 'Adam',    phone: '555-5678',    age: 35 },
        { name: 'Julie',   phone: '555-8765',    age: 29 }
      ];

      $scope.order = function(predicate, reverse) {
        $scope.friends = orderBy($scope.friends, predicate, reverse);
      };
      $scope.order('-age',false);
    }