Here is a suggested solution for your sorting needs:
<select ng-model="sr">
<option value="+sr">Top Sr</option>
<option value="-sr">Bottom Sr</option>
</select>
<select ng-model="tr">
<option value="+tr">Top Rank</option>
<option value="-tr">Bottom Rank</option>
</select>
To apply sorting to the table, use the following ng-repeat statement:
<tr ng-repeat="items in empList | orderBy : [tr, sr]" >
In the controller, set default values as follows:
$scope.sr = '+sr';
$scope.tr = '+tr';
Replace 'sr' and 'tr' with the property names from empList that you want to sort by.
By selecting different options in the select dropdowns, the $scope variables will update automatically and reflect in the correct sorting order:
<tr ng-repeat="items in empList | orderBy : [sr, tr]" >
An updated plunker is available for reference. Make sure to review the changes made to the property name 'tr'.
UPDATE:
If you want to always sort by the property associated with the most recently changed dropdown, follow these steps (another plunker):
1)Initialize the following variable:
$scope.srRecentlyChanged = true;
2)Add an event on select dropdown change:
<select ng-model="sr" ng-change="srRecentlyChanged = true;">
<option value="+sr">Top Sr</option>
<option value="-sr">Bottom Sr</option>
</select>
<select ng-model="tr" ng-change="srRecentlyChanged = false;">
<option value="+tr">Top Rank</option>
<option value="-tr">Bottom Rank</option>
</select>
3)Modify the orderBy expression accordingly:
<tr ng-repeat="items in empList | orderBy : (srRecentlyChanged? sr : tr)">