how to use filter on button click in angular js

Question

could you please tell me how to sort array in ascending or descending order on button click .Actually I have a button on header "V" .using button click I want to display data in ascending order .Actually I am making a grid view in Ionic using angular js .But I want to sort that using button click .I need to sort table according to first column .Because user click on first column "V".

here is my code

http://plnkr.co/edit/UloVItuyLLvmeo34R4gX?p=preview

Expected result after button click

Calls   Royal Dutch sell

p        a royal data

Xgtyu     test royal data

can we sort the column and display on view on button click ?

  <div class="row gray-20 mrginrightleft">
    <div class="col col-center " ng-repeat="d in data | filter:{checked: true}"><i class="button button-icon icon ion-arrow-down-b" ng-click="sortdata()"></i><strong>{{d.label}}</strong></div>
    <div class="col col-10 text-center ">
      <button class=" button-icon icon ion-gear-b" ng-click="openPopover($event)"></button>
    </div>
  </div>
  <div class="row mrginrightleft" ng-repeat="column in displayData | filter: query">
    <div class="col col-center brd" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
    <div class="col col-10 text-center brd">
    </div>
  </div>

Answer 1

EDIT: Sort both directions

Updated Plunker

To be able to sort in both directions, you should probably use a directive. Using a directive will allow you to create an isolated scope for each of the headings, this way they can keep track of their own current values.

.directive('sortHeader', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      'label': '@',
      'sortstring': '&sortExp',
      'idx': '@index'
    },
    templateUrl: 'sort-header.html',
    link: function(scope, element, attrs) {
      scope.reverse = false;
      element.on('click', function(){
        $timeout(function(){
          scope.reverse = !scope.reverse;
        });
      });
    }
  };
});

This directive has properties for:

1. label [string] The column header name.
2. index [string] The column index in the original data set. Note, you cannot use the $index of the ng-repeat.
3. sort-exp [method] This is a bindable method that you can use to retrieve the current index and reverse values to set your orderBy filter expression. The function passes two values: idx, reverse, in that order. These represent the index of the current element and reverse order as a boolean.

You use the directive as follows:

<sort-header label="{{d.label}}" index="{{d.index}}" sort-exp="setSort(idx, reverse)"></sort-header>

And, in your controller, you can bind to the sort-exp with a function:

$scope.setSort = function(idx, reverse){
  $scope.sortval = 'columns['+idx+'].value';
  $scope.reverse = reverse;
};

Finally, in your ng-repeat, you can set up your orderBy filter with the scope values that you used to define the sort expression (in this case $scope.sortval) and the sort order (in this case $scope.reverse):

ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query"

Answer 2

if your data is an array then you can use orderBy filter See official doc here : https://docs.angularjs.org/api/ng/filter/orderBy