How can I sort a directive output? - angularjs

Question

I have the following Directive:
app.directive('sidebar', function () {
return {
restrict: 'E',
replace: true,
template: '<li ng-repeat="(keymenu, valmenu) in menu"><i class="{{valmenu.image}}"></i><span class="hidden-sm">{{keymenu}}</span></li>',
link: function (scope, elem, attrs) {
scope.menu = {
"Home": {
"sort": 1,
"url": "/",
"image": "fa fa-bar-chart-o"
},
"Datasources": {
"sort": 2,
"url": "/datasources",
"image": "fa fa-dashboard"
},
"Logger": {
"sort": 3,
"url": "/Logger",
"image": "fa fa-dashboard"
}
}
}
}
});
Currently the order is: Datasources, Home, Logger I would like to order it either by the sort property or by it's 'natural' order as the elements are ordered within the scope.menu object.

Answer 1

You can use orderBy direcly into the <li /> template:
This code will sort your menu for the property name that you want:
'<li ng-repeat="(keymenu, valmenu) in menu| orderBy:myProperty">'
EDIT:
You should change the way your JSON looks, or you will have issues to access and order the menu. The way you did every menu entry is a different object, you should do like this:
scope.menu =[
{
"name": "Home",
"sort": 1,
"url": "/",
"image": "fa fa-bar-chart-o"
},
{
"name":"Datasources",
"sort": 2,
"url": "/datasources",
"image": "fa fa-dashboard"
},
{
"name": "Logger",
"sort": 3,
"url": "/Logger",
"image": "fa fa-dashboard"
}
]
Then sort by name for exemple:
'<li ng-repeat="(keymenu, valmenu) in menu| orderBy:name">'