AngularJS orderby filter without live update

Question

I have a AngularJS project with a list of checkbox items .. I want all the selected checkbox at the top on "load"(init), but when I use a orderBy filter it will do the orderBy live - how can I prevent that?

<div ng-app>
    <div ng-controller="FooController">
        <div ng-repeat="item in items|orderBy:'selected':true"><input type="checkbox" ng-model="item.selected" /> {{item.desc}}</div>
    </div>
</div>

function FooController($scope) {
    $scope.items = [
        {desc: 'test1', selected: false},
        {desc: 'test2', selected: true},
        {desc: 'test3', selected: false},
        {desc: 'test4', selected: false},
        {desc: 'test5', selected: false},
        {desc: 'test6', selected: false},
        {desc: 'test7', selected: true},
        {desc: 'test8', selected: false},
        {desc: 'test9', selected: false},
        {desc: 'test10', selected: false},
    ];
}

see the jsfiddle here - http://jsfiddle.net/a4uwz9aw/1/

Answer 1

In that case do not use orderBy on the view, instead sort it when you set the view model items in the scope itself.

Using native sort:-

   $scope.items = items.sort(function(itm1, itm2){
       return itm1.selected < itm2.selected ? 1:-1;
    });

Plnkr

You can also use orderBy filter in the controller to perform ordering at once.

  $scope.items = orderByFilter(items, "selected", true);

Plnkr

This way you abstract out the logic in controller itself.