Angularjs predicate on ng-if is not working - angularjs

Question

I am trying to implement sorting for my AngularJS application using Predicate function. This is my code
<td>
<a href="" ng-click="predicate = 'date'; reverse=!reverse">
Time
<span ng-show="predicate == 'date'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
<td ng-if="SId==2">
<a href="" ng-click="predicate = 'name'; reverse=!reverse">
Name
<span ng-show="predicate == 'name'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
<td ng-if="SId==2">
<a href="" ng-click="predicate = 'rno'; reverse=!reverse">
RNO
<span ng-show="predicate == 'rno'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
<td ng-if="SId==1">
<a href="" ng-click="predicate = 'phoneNumber'; reverse=!reverse">
Phone Number
<span ng-show="predicate == 'phoneNumber'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
I have two dashboards, which are using the same HTML page. But Column names are different. So, column names are displayed based ng-if condition (SId = 1 is first dashboard & SId = 2 is second dashboard). Now columns are shown correctly in both dashboards. But when I implement sorting upon column names, the column which is having ng-if condition is not sorting.

Answer 1

ng-if has its own scope. So when you do predicate = 'rno' inside an ng-if, you're creating a predicate attribute in the ng-if scope instead of modifying the controller scope's predicate.
Use a function to set the predicate:
$scope.sortBy = function(property) {
$scope.predicate = property;
$scope.reverse = !$scope.reverse;
}
and
<td ng-if="SId==2"><a href="" ng-click="sortBy('name')">