Dynamic sorting on table header click in Angular

By using of angularjs orderBy filter to sort table data dynamic or user header click event.

Example:
Java Script:

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  $scope.StdDetails = StdDetails;
  $scope.SortcolumnName = "StudentName";
  $scope.reverseSort = false;
  $scope.OrderOf = "descending";
  $scope.SortTable = function(colName) {
    $scope.reverseSort = (colName == $scope.SortcolumnName) ? !$scope.reverseSort : false;
    $scope.SortcolumnName = colName;
    $scope.OrderOf = $scope.reverseSort ? "ascending" : "descending";
  }
  $scope.cssHeaderSort = function(colName) {
    if (colName == $scope.SortcolumnName) {
      return $scope.reverseSort ? "arrow-up" : "arrow-down";
    }
    return '';
  }

});

HTML
<div ng-controller="StdController">
  <div>Display in<b> {{OrderOf}} order</b></div>
  <hr/>
  <table>
    <tr>
      <th ng-click="SortTable('StudentName')">Student Name
        <div ng-class="cssHeaderSort('StudentName')"></div>
      </th>
      <th ng-click="SortTable('Class')">Class
        <div ng-class="cssHeaderSort('Class')"></div>
      </th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:SortcolumnName:reverseSort ">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

I created a fiddle here with a demo:
https://jsfiddle.net/hxktbcms/