AngularJS - Как сортировать таблицы, созданные с помощью ng-repeat

Question

Я нашел плагин под названием Boostrap-Sortable (https://github.com/drvic10k/bootstrap-sortable/), вставил все необходимые зависимости и наблюдал стилизацию моей таблицы.

Однако после сортировки в ячейках строк таблицы ng-repeat меняются только имена классов, ничего не сортируется.

Я в тупике? Есть ли способ использовать AngularJS в сочетании с этим жизнеспособным плагином?

Template

<div ng-controller="ActionController" ng-app="Action">
    <init-data/>
    ActionItems
    <table id="actionitems" class="table table-striped table-condensed table-bordered sortable action"> <!--datatable="" dt-options="dtOptions"-->
         <thead>
            <tr>
                <th data-sortable="true">
                    Action Item ID
                </th>
                <th data-sortable="true">
                    Action Item Title
                </th>
                <th data-sortable="true">
                    Criticality
                </th>
                <th data-sortable="true">
                    Assignor
                </th>
                <th data-sortable="true">
                    Owner
                </th>
                <th data-sortable="true">
                    Alt Owner
                </th>
                <th data-sortable="true">
                    Approver
                </th>
                <th data-sortable="true">
                    Assigned Date
                </th>
                <th data-sortable="true">
                    DueDate
                </th>
                <th data-sortable="true">
                    ECD
                </th>
                <th data-sortable="true">
                    Completion Date
                </th>
                <th data-sortable="true">
                    Closed Date
                </th>
            </tr>
         </thead> 
         <tbody>
            <tr ng-repeat="actionitem in actionitems">
               <td>{{actionitem.actionitemid}}</td> 
               <td>{{actionitem.title}}</td> 
               <td>{{actionitem.criticality}}</td>
               <td>{{actionitem.assignor}}</td> 
               <td>{{actionitem.owner}}</td>
               <td>{{actionitem.altowner}}</td> 
               <td>{{actionitem.approver}}</td> 
               <td>{{actionitem.assigneddate}}</td> 
               <td>{{actionitem.duedate}}</td> 
               <td>{{actionitem.ecd}}</td> 
               <td>{{actionitem.completiondate}}</td> 
               <td>{{actionitem.closeddate}}</td> 
            </tr>
         </tbody>     
    </table>
</div>

Контроллер

angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', /*'DTOptionsBuilder',*/ function($http, $resource, $scope, $state, $timeout/*, DTOptionsBuilder*/){
        $scope.actionitems = [];    
        $scope.actionitem = {
                actionitemid: '',
                title: '',
                criticality: '',
                assignor: '',
                owner: '',
                altowner: '',
                approver: '',
                assigneddate: '',
                duedate: '',
                ecd: '',
                completiondate: '',
                closeddate: ''
        };
        function GetActionItems2()
        {
           return $resource('actionitems.json').query().$promise;
        }

        $scope.init = function(){
            //var vm = this;
            //vm.dtOptions = DTOptionsBuilder
            //.fromFnPromise(function(){
                return $http.get('api/actionitems').then(function(response){
                   if (response.data.Succeeded){
                        $.each(response.data.Result, function(key, actionitem){
                            response.data.Result[key] =  
                            { 
                                actionitemid: actionitem.actionitemid, 
                                title: actionitem.actionitemtitle,
                                criticality: actionitem.criticality,
                                assignor: actionitem.assignor,
                                owner: actionitem.owner,
                                altowner: actionitem.altowner,
                                approver: actionitem.approver,
                                assigneddate: actionitem.assigneddate,
                                duedate: actionitem.duedate,
                                ecd: actionitem.ecd,
                                completiondate: actionitem.completiondate,
                                closeddate: actionitem.closeddate
                            };    
                        });
                        $scope.actionitems = response.data.Result;
                        return response.data.Result;
                   }
                   else{
                    return [];
                   }
                });

            }

            //.withPaginationType('full_numbers')
            //.withDisplayLength(10)
            //.withOption('order', [1, 'desc'])
            //.withOption('scrollY', 500)
            //.withOption('scrollX', '100%')
            //.withDOM('lftrpi')
            //.withScroller();
}]).directive('initData', function(){
          return {
                restrict: 'E',
                link: function (scope, element, attrs) {

                      scope.init().then(function(){
                          $.bootstrapSortable(true);      
                      });
                }
          }
});

Answer 1

Добавление следующего к моему контроллеру

    $scope.propertyName = 'actionitemid';
    $scope.reverse = true;

    $scope.sort = function(propertyName) {
        $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
        $scope.propertyName = propertyName;
    };

И изменение моего шаблона

<div ng-controller="ActionController" ng-app="Action">
    <init-data/>
    ActionItems
    <table id="actionitems" class="table table-striped table-condensed table-bordered action"> <!--datatable="" dt-options="dtOptions"-->
         <thead>
            <tr>
                <th ng-click="sort('actionitemid')" ng-class="{reverse: reverse}">
                    Action Item ID                       
                </th>
                <th ng-click="sort('actionitemtitle')" ng-class="{reverse: reverse}">
                    Action Item Title 
                </th>                         
                <th ng-click="sort('criticality')" ng-class="{reverse: reverse}">
                    Criticality
                </th>
                <th ng-click="sort('assignor')" ng-class="{reverse: reverse}">
                    Assignor
                </th>
                <th ng-click="sort('owner')" ng-class="{reverse: reverse}">
                    Owner
                </th>
                <th ng-click="sort('altowner')" ng-class="{reverse: reverse}">
                    Alt Owner
                </th>
                <th ng-click="sort('approver')" ng-class="{reverse: reverse}">
                    Approver
                </th>
                <th ng-click="sort('assigneddate')" ng-class="{reverse: reverse}">
                    Assigned Date
                </th>
                <th ng-click="sort('duedate')" ng-class="{reverse: reverse}">
                    Due Date
                </th>
                <th ng-click="sort('ecd')" ng-class="{reverse: reverse}">
                    ECD
                </th>
                <th ng-click="sort('completiondate')" ng-class="{reverse: reverse}">
                    Completion Date
                </th>
                <th ng-click="sort('closedate')" ng-class="{reverse: reverse}">
                    Closed Date
                </th>
            </tr>
         </thead> 
         <tbody>
            <tr ng-repeat="actionitem in actionitems | orderBy:propertyName:reverse">
               <td>{{actionitem.actionitemid}}</td> 
               <td>{{actionitem.title}}</td> 
               <td>{{actionitem.criticality}}</td>
               <td>{{actionitem.assignor}}</td> 
               <td>{{actionitem.owner}}</td>
               <td>{{actionitem.altowner}}</td> 
               <td>{{actionitem.approver}}</td> 
               <td>{{actionitem.assigneddate}}</td> 
               <td>{{actionitem.duedate}}</td> 
               <td>{{actionitem.ecd}}</td> 
               <td>{{actionitem.completiondate}}</td> 
               <td>{{actionitem.closeddate}}</td> 
            </tr>
         </tbody>     
    </table>
</div>

Получил желаемый результат!