angular ngmodel - Show sorted Icon on sorting in angularJS using ng-repeat -

angular ngmodel - Show sorted Icon on sorting in angularJS using ng-repeat -

i not able show proper icon on sorting of column, if click of 1 column sorting icons of other columns gets updated. sorted column should update on sorting of respective column. have listed code here : http://plnkr.co/edit/uonognz0s16ikjkwlwyg?p=preview

html code : <table border="1"> <thead> <tr> <th ng-repeat="key in getkeysofcollection(colors[0])" ng-click="ctrl.predicate = key; ctrl.reverse=!ctrl.reverse;"> {{key}} <span class="fa fa-sort columnsorticons" ng-if="ctrl.reverse"></span> <span class="fa fa-sort-down columnsorticons" ng-if="!(ctrl.reverse)"></span> <span class="fa fa-sort-up columnsorticons" ng-if="ctrl.reverse"></span> </th> </tr> <tr> <th ng-repeat="key in getkeysofcollection(colors[0])"> <input type="text" ng-model="search[key]" /> </th> </tr> </thead> <tbody> <tr ng-repeat="item in colors | filter:search | orderby:ctrl.predicate:ctrl.reverse"> <td ng-repeat="key in getkeysofcollection(item)">{{item[key]}}</td> </tr> </tbody> </table> js code : this.predicate='id'; this.reverse=false; $scope.search = {}; $scope.colors = [{ 'id': 1, 'productid': 1001, 'productname': 'prd 1', 'minimumlevel': 2, 'price': 12.50, 'productdate': '2014-11-01t06:41:30.809z' }, { 'id': 2, 'productid': 1002, 'productname': 'prd 2', 'minimumlevel': 23, 'price': 12.54, 'productdate': '2014-11-02t06:41:30.809z' }, { 'id': 3, 'productid': 1003, 'productname': 'prd 3', 'minimumlevel': 2, 'price': 12.50, 'productdate': '2014-11-04t06:41:30.809z' }, { 'id': 4, 'productid': 1004, 'productname': 'prd 4', 'minimumlevel': 2, 'price': 12.50, 'productdate': '2014-11-22t06:41:30.809z' }, { 'id': 5, 'productid': 1005, 'productname': 'prd 5', 'minimumlevel': 2, 'price': 12.50, 'productdate': '2014-11-18t06:41:30.809z' }]; $scope.getkeysofcollection = function(obj) { obj = angular.copy(obj); if (!obj) { homecoming []; } homecoming object.keys(obj); }

in ng-if statements aren't checking see if column sorted column (the predicate):

<span class="fa fa-sort-down columnsorticons" ng-if="!(ctrl.reverse) && key == ctrl.predicate"></span> <span class="fa fa-sort-up columnsorticons" ng-if="ctrl.reverse && key == ctrl.predicate"></span>

updated code.

angularjs angular-ngmodel