Separate Sort by table heading for different tables

In the following codepen I’m trying to sort by the column headers independently on two different tables. However, when I sort on any of the two tables it also sorts the columns of the other table. I tried creating a separate sort function called sortByB and using that on one of the tables but it still sorts the other table. Thank you.

JS

$scope.sortBy = function(sortField) {
  $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
  $scope.sortField = sortField;
};

$scope.sortByB = function(sortField) {
  $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
  $scope.sortField = sortField;
};

Answer

Look at this code:

<tr ng-repeat="ticket in filteredTicketA | filter:var2 | filter:searchTextA:true:Status | orderBy:sortField:reverseOrder">

The orderBy:sortField:reverseOrder part controls the sorting.

Right now, sortField and reverseOrder are shared between your two tables. You would need two sortField and two reverseOrder variables if you want different sorting settings for the two different tables.

Also note that you may not need to duplicate the data array, nor the sort callback.