Angularjs | Orderby Filter Not Updated Dynamically

I'm having trouble with the orderBy filter in AngularJS. Here's my setup:

Solution 1:

I don't think your idea is wrong. It does work. Here is the working plunker.

You must have something wrong somewhere else.

app.js

var app = angular.module('ngApp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.friends = [
        {name: 'John', phone: '555-1276'},
        {name: 'Mary', phone: '800-BIG-MARY'},
        {name: 'Mike', phone: '555-4321'},
        {name: 'Adam', phone: '555-5678'},
        {name: 'Julie', phone: '555-8765'}
    ];
    $scope.setOrder = function (order) {
        $scope.order = order;
    };
}]);

main html

<ulclass="nav nav-pills"><ling-class="{'active': order=='name'}"><ahref="#"ng-click="setOrder('name')">name</a></li><ling-class="{'active': order=='phone'}"><ahref="#"ng-click="setOrder('phone')">phone</a></li></ul><ul><lidata-ng-repeat="friend in friends|orderBy:order"><spanclass="name">{{friend.name}}</span><spanclass="phone">{{friend.phone}}</span></li></ul>

Solution 2:

I know its an old question but anyone else having the same issue might find this useful. I had the same issue. Clicks to anchor were reloading the page and hence, the order was being set to default whenever you click any table header. This also explains why not setting the order to a default globally fixed it for you.

I replaced my anchor with a span element and it worked fine.