why custom filter is not working in angular js?

Question

I need to show sorted data using ng-repeat .I take help from this example

Order by Object key in ng-repeat

but added same fitter but not get correct output.It is not sort my list.

here is my code http://plnkr.co/edit/qFaBYnwCVTZJZSiw6hdD?p=preview

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

app.controller('MyCtrl',function($scope){
   $scope.lines = {
     "a": {name:"bb"},
    "aa":{name: 'aa'},
    "zz": {name:"zz"},
    "oo":{name: 'oo'}, 
    "kk": {name:"k"},
    "j":{name: "a"},
    "n": {name:"n"},
    "c":{name: "c"}
}
})
app.filter('toArray', function() { return function(obj) {
    if (!(obj instanceof Object)) return obj;
    return _.map(obj, function(val, key) {
        return Object.defineProperty(val, '$key', {__proto__: null, value: key} );
    });
}});

Answer 1

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

app.controller('MyCtrl',function($scope){
   $scope.lines = {
     "a": {name:"bb"},
    "aa":{name: 'aa'},
    "zz": {name:"zz"},
    "oo":{name: 'oo'}, 
    "kk": {name:"k"},
    "j":{name: "a"},
    "n": {name:"n"},
    "c":{name: "c"}
};
  
  $scope.myFilter = function(){
    var array=[];
    angular.forEach($scope.lines,function(value,key){
       array.push(value);
      });
    return array;
    
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="(key, line) in myFilter() | orderBy:'name'">
      <div class="preview">{{line.name}}</div>
   </div>
   </div>

try this. you should pass object property to orderBy.

   <div ng-repeat="(key, line) in lines | toArray | orderBy:'name'">

Edit

you can use filter in controller.like this

  $scope.myFilter = function(){
   var array=[];
   angular.forEach($scope.lines,function(value,key){
   array.push(value);
  });
  return $filter('orderBy')(array, 'name');
 }

to use filter you should inject service filter.

  app.controller('MyCtrl',function($scope,$filter){