angularjs - Build a menu which changes based on url path and params -

is there tutorial on how create menu in angularjs, menu should appear on few pages, example:

localhost/web (is page shows projects)  because don't have project selected don't sidemenu  localhost/web/1 (is main page of project)   because i've selected project 1 can see sidemenu. 

my links in sidemenu have projectid

project settings(url) -> localhost/web/1/settings web.settings({projectid: projectid}) 

and many others, sidemenu show in pages project id selected.

keep menu data in json like

// here key in json object current url.

   $scope.menus = {                      "syllabus":[{name:"chapters",url:"",class:"fa fa-folder-open"},{name:"q&a",url:"url",class:"fa fa-folder-open"},{name:"syllabus 3",url:"url 1",class:"fa fa-folder-open"}],                     };   $scope.sub_menus = [];     $scope.setsubmenu =function(menu){          $scope.sub_menus = $scope.menus[menu];     } 

call setsubmenu function whenever change route. pass current route argument set current page menu data in sub_menus array. angular render automatically you.

app.directive('submenu', ['$compile', function($compile) {     return {         restrict: 'ea',         template: '<div ng-if="sub_menus.length" class="subtabs"> <ul class="nav"><li ng-repeat = "sb in sub_menus"><a href="#" ui-sref="{{sb.url}}"><i class=\"{{sb.class}}\""></i> &nbsp;{{sb.name}}</a></li>' +             '</ul></div>',         compile: function() {             return {                 post: function($scope) {                  }             }         }     } }]);