(function () {
    'use strict';

    angular
            .module('...')
            .directive('sortAttr', function () {
                return {
                    require: '^^sort',
                    restrict: 'A',
                    scope: {},
                    link: addSortableArrows
                };
            });

    function addSortableArrows(scope, element, attr, sortCollectionController) {
        var SORT_ASC = 'sort-asc';
        var SORT_DESC = 'sort-desc';
        var CLICKABLE = 'clickable';
        var SORTABLE = 'sortable';
        var CLICK_EVENT = 'click';

        scope.reverse = false;

        element.addClass(CLICKABLE);
        element.addClass(SORTABLE);

        element.bind(CLICK_EVENT, function (e) {
            var allHeaders = element.parent().children();
            allHeaders.removeClass(SORT_ASC);
            allHeaders.removeClass(SORT_DESC);
            if (scope.reverse) {
                element.removeClass(SORT_ASC);
                element.addClass(SORT_DESC);
            } else {
                element.removeClass(SORT_DESC);
                element.addClass(SORT_ASC);
            }
            sortCollectionController.sortBy(attr.sortAttr, scope.reverse);
            scope.reverse = !scope.reverse;
        });
    }
})();


(function () {
    'use strict';

    angular
            .module('LynxMethod')
            .controller('SortController', [
                '$scope',
                controller
            ]);

    function controller($scope) {

        var vm = this;
        vm.sortBy = sortBy;

        function sortBy(attribute, reverse) {
            vm.by = attribute;
            vm.reverse = reverse;
            $scope.$apply();
        }

    }
})();

(function () {
    'use strict';

    angular
            .module('LynxMethod')
            .directive('sort', function () {
                return {
                    restrict: 'A',
                    scope: {
                        by: '=',
                        reverse: '='
                    },
                    controller: 'SortController',
                    controllerAs: 'vm',
                    bindToController: true
                };
            });
})();


<table class="table table-hover animated fadeIn" sort by="vm.sortAttribute" reverse="vm.sortReverse">
    <thead>
        <tr>
            <th ng-if="vm.showPpe" sort-attr="number">PPE</th>
            <th sort-attr="number">Numer</th>
            <th sort-attr="startDate">Od</th>
...


/* TABLE SORTABLE */
th.sortable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}

table .sortable:after{
    content:"";
    float:right;
    margin-top:7px;
    visibility:hidden;
    border-left:4px solid transparent;
    border-right:4px solid transparent;

    border-top:none;
    border-bottom:4px solid #000;
}

table .sort-desc:after{
    border-top:4px solid #000;
    border-bottom:none;
}

table .sort-asc,table .sort-desc{
    background-color:rgba(50, 200, 222, 0.25);
}

table .sortable:hover:after, table .sort-asc:after, table .sort-desc:after {
    visibility:visible;
}

.col-centered{
    float: none;
    margin: 0 auto;
}