An AngularJS directive to add sorting capability to table headers.

sortableGrid.js

    sortableGrid.$inject = [];
    function sortableGrid() {

        return <ng.IDirective>{
            restrict: 'A',
            scope: {
                order: '=',
                by: '=',
                reverse: '='
            },
            transclude: true,
            template: '<a ng-click="sort()">' +
            '<span ng-transclude></span>' +
            '</a>&nbsp;<i class="glyphicon" ng-class="{\'fa fa-sort-asc\' : order===by && !reverse,  \'fa fa-sort-desc\' : order===by && reverse}"></i>',
            link: link
        }

        function link($scope, $element, $attrs) {
            $scope.sort = function () {
                if ($scope.order === $scope.by) {
                    $scope.reverse = !$scope.reverse
                } else {
                    $scope.by = $scope.order;
                    $scope.reverse = false;
                }
            }
        }
    }
    angular.module('app').directive('sortableGrid', sortableGrid);