javascript - Angular orderBy not re-running after ng-click changes order string -

javascript - Angular orderBy not re-running after ng-click changes order string -

i have a collection of panels each simple list of items needs either sorted 'computedload' or 'name'. have next objects , methods accomplish generically on of panels (only showing 1 panel among many).

scope.orderby = { name: { displayname: "name", sort: "name", reverse: false }, load: { displayname: "load", sort: "-computedload", reverse:false } }; scope.selectorder = function (panel, order) { timeout(function () { panel.activeorder = order; }); }; scope.panels = { methods: { activeorder: scope.orderby.name } };

i have next html:

<div> <ul class="nav nav-pills"> <li class="list-label"><a>order by:</a></li> <li ng-repeat="order in orderby"><a href="#" ng-click="selectorder(panels.methods, order)">{{order.displayname}}</a></li> </ul> <ul class="nav nav-pills nav-stacked"> <li ng-repeat="item in suite.methods | orderby:panel.methods.activeorder.sort"><a href="#"><span class="text">{{item.name}}</span></a></li> </ul> </div>

the selectorder method doesn't seem work. ideas? missing something?

here example: http://jsbin.com/puxoxi/1/

setting panel.activeorder happens asynchronously, outside of angulars called "digest cycle". create angular re-evaluate scope, utilize $apply function:

it this:

scope.$apply(function() { panel.activeorder = order; });

javascript angularjs