how to create dynamic menu in angularjs -

how to create dynamic menu in angularjs -

i working on angularjs.i wanted implement dynamic menu topmenu , left menus rendered if top menu have child.

i have tried below code didn't best approach .pls suggest

<div class="row" ng-app="app"> <div class="large-12 columns" ng-controller="navctrl"> <nav class="nav-menu" menu-data="menu"></nav> <!-- <nav class="top-bar"> <section class="anav-menu top-bar-section" menu-data="menu"></section> </nav> --> </div> </div> var app = angular.module('app', []); app.controller('navctrl', ['$scope', '$location', function ($scope, $location) { $scope.breadcrumbs = []; $scope.menu = [ {text: 'home', href:'/app/index.html', children: [ {text:'manage dashboard', href:'/dashb'} ] }, {text: 'manage', href:'/manage', children: [ {text:'manage people', href:'/manage-people', children: [ {text:'manage staff', href:'/manage-staff'}, {text:'manage clients', href:'/manage-clients'} ]} ]}, {text: 'reports', href:'/reports', children: [ {text: 'report numero uno', href: '#'}, {text: 'rep numero 2', href: '#', children: [{text:'third tier', href: '#'}, {text:'another 3rd tier', href: '#', children: [ {text:'sub sub nav', href:'#'} ]}]} ]}, {text: 'my info', href:'/my-info' }, ] }]); /* directives */ app.directive('navmenu', ['$parse', '$compile', function($parse, $compile) { homecoming { restrict: 'c', //element scope:true, link: function (scope, element, attrs) { scope.selectednode = null; scope.$watch( attrs.menudata, function(val) { var template = angular.element('<ul id="parenttreenavigation"><li ng-repeat="node in ' + attrs.menudata + '" ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" >{{node.text}}</a><sub-navigation-tree></sub-navigation-tree></li></ul>'); var linkfunction = $compile(template); linkfunction(scope); element.html(null).append( template ); }, true ); } }; }]) .directive('subnavigationtree', ['$compile', function($compile) { homecoming { restrict: 'e', //element scope:true, link: function (scope, element, attrs) { scope.tree = scope.node; if(scope.tree.children && scope.tree.children.length ) { var template = angular.element('<ul class="dropdown "><li ng-repeat="node in tree.children" node-id={{node.' + attrs.nodeid + '}} ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" ng-bind-html-unsafe="node.text"></a><sub-navigation-tree tree="node"></sub-navigation-tree></li></ul>'); var linkfunction = $compile(template); linkfunction(scope); element.replacewith( template ); } else { element.remove(); } } }; }]);

angularjs