AngularJS: Toggle sorting columns between ascending and descending

Here is what I had done:



1.  On server side, I  created a model which has a State property for the table header:


    public class GICResultsModel
    {
       
        public string TermTarget { get; set; }

       
        public int Count { get; set; }

       
        public int Current { get; set; }

       
        public int PageSize { get; set; }

       
        public List<dcm_xxx_searchResult> SearchResults { get; set; }

       
        public List<HeadData> Header { get; set; }

       
        public List<string> HeaderIds { get; set; }


    }

    public struct HeadData
    {
        public string Id { get; set; }
        public string Disc { get; set; }

        /// <summary>
        /// This is the State to hold the toggling state
        /// </summary>
        public bool State { get { return false; }  }
    }




2.  inside the view:

        <tr class="headerTR" ng-show="xxxResultModel.Header.length > 0">          
              <th ng-repeat="m in gicResultModel.Header">  
  <span class="spanLink" ng-click="searchCall(m.Id,-1)" >{{m.Disc}}</span></th>
      </th>
   
        </tr>




3.  inside the Controller code:

xxxApp.controller('xxxsearchController', function($scope,$http,$routeParams) {

            // In case we use route params
        if( typeof $routeParams.id === 'undefined' || $routeParams.id === null)  searchPage = 1;
else if( $routeParams.id === "0" || $routeParams.id === "-1") {
              searchPage = 1 ; $('#sortingDirection').val($routeParams.id === "-1"? "1" : "0");
          }
else searchPage = !isNaN(parseInt( $routeParams.id ))
                                        ? parseInt( $routeParams.id )
                                        : 1;

if( !(typeof $routeParams.t === 'undefined' || $routeParams.t === null || $routeParams.t === 'null'))
                 searchSortingTarget = $routeParams.t;
         
            inProcess = true;

   
$('#xxxSearchCriteria').show();
$('#xxxTopFilters').hide();

$scope.searchCall = function(sortingTarget,page){
var isSorting = false;
var header = null;//a temp param to hold the state

if(page===-1){

                        ///////////////////////////////////
                        //HERE Toggle the state
this.m.State = !this.m.State;
                        ///////////////////////////////////

$('#sortingDirection').val(this.m.State?1:0);
$('#sortingTarget').val(this.m.Id);
sortingTarget = this.m.Id;
page = 1;
isSorting = !isSorting;

                        //assign the updated Header with sorting state to 'header'
if($scope.xxxResultModel!==null) header = $scope.xxxResultModel.Header;
}

var params = new FiltersModel(sortingTarget,page);

       $http.post('/xxx/Browser/Services/xxxHandler.ashx', JSON.stringify(params))
                      .success(function (data, status, headers, config) {
                                               $scope.xxxResultModel = data;

                                                ////////////////////////////////////////
                                                //The Magic happens here:
                                                //We keep the header data
                                                //by replacing using the updated header state
if( header!==null ) $scope.xxxResultModel.Header = header;

$scope.current = data.Current==-1?1:data.Current;

inProcess = false;
                                            })
                    .error(function (data, status) {
                        $scope.errors.push(status);
inProcess = false;
                    });
 };

 $scope.searchCall(searchSortingTarget,searchPage);

                 //This is for custom paging use
 $scope.getPageTotal = function(){
             
var high = Math.ceil(
                                                                              $scope.xxxResultModel.Count
                                                                              /$scope.xxxResultModel.PageSize
                                                                              );
var low = 1;
var arr = [];

while(low <= high){
arr.push(low++);
}
return arr;

};
});