Sort data from the controller in angularjs

Its very simple to apply order-by filter in angularjs view as shown.

<tr ng-repeat="product in products |orderBy:'id'">

Alternatively we can apply order-by filter from the controller which gives us a lot more controller over sorting our data.
I will demonstrate the same below.

---

---

My view would look something like this to show list of products.

<table class="table table-bordered">
    <thead>
      <tr>
        <th ng-click="sort('id')">Id</th>
        <th ng-click="sort('brand')">Brand</th>
        <th ng-click="sort('name')">Name</th>
        <th ng-click="sort('price')">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="product in products |orderBy:'id'">
        <td>{{product.id}}</td>
        <td>{{product.brand}}</td>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
      </tr>
    </tbody>
  </table>

I have a table having a header and body. Table header has th tag whose click event is calling sort() function on the controller.

On the other hand my javascript code would be

var app = angular.module('app', []);

app.controller('myController', function($scope, $filter) {

  $scope.descOrder = false;

  $scope.products = [{
    id: 1,
    brand: "Nokia",
    name: "Lumia 510",
    price: 100
  }, {
    id: 6,
    brand: "Samsung",
    name: "Galaxy S5",
    price: 300
  }, {
    id: 1,
    brand: "Sony",
    name: "Xperia Z",
    price: 400
  }, {
    id: 3,
    brand: "Samsung",
    name: "J5",
    price: 200
  }, {
    id: 5,
    brand: "LG",
    name: "Optimus",
    price: 500
  }];

  $scope.sort = function(columnName) {
    var reverse = $scope.currentSortedColumn === columnName ? !$scope.descOrder : $scope.descOrder;
    $scope.products = $filter('orderBy')($scope.products, columnName, reverse);
    $scope.currentSortedColumn = columnName;
    $scope.descOrder = reverse;
  };
});

I am doing couple of things in the controller:
1. setting list of dummy products to show.
2. holding the sort Order in $scope.descOrder boolean variable
3. a sort function on the scope which would be sorting my data based on user selection.

User can sort data by clicking on the column name header of the table. User can even toggle sort order by clicking on the same column twice.
We can use $filter to sort our data which takes three parameters, first being the data, second parameter is columnName and last one being the sort order. Once the sorting is done i am saving the state of the sort in $scope.currentSortedColumn and $scope.descOrder variables.

A working example can be found here