(function(angular) { 'use strict'; var app = angular.module("app", []); app.controller("ctrlMenu", ["$scope", function($scope) { var ctrl = this; ctrl.menu = [{ "id": 1, "title": "Azure", "class": "fa-cloud", "url": "#", "menu": [{ "id": 121, "title": "Azure AD", "class": "fa-cloud", "url": "#", "menu": [{ "id": 1210, "title": "Settings", "class": "fa-cloud", "url": "#", "menu": [{ "id": 1210, "title": "Apps", "class": "fa-cloud", "url": "#" }, { "id": 1211, "title": "Users", "class": "fa-cloud", "url": "#" }] }] }] }, { "id": 2, "title": "AWS", "class": "fa-cloud", "url": "#", "menu": [{ "id": 21, "title": "DMS", "class": "fa-cloud", "url": "#", "menu": [{ "id": 211, "title": "End Points", "class": "fa-cloud", "url": "#" }, { "id": 2112, "title": "Replication", "class": "fa-cloud", "url": "#" }] }] }]; } ]); }(angular));
<div ng-app="app"> <div ng-controller="ctrlMenu as ctrl"> <div class="body-content panel-body text-center"> <h2 class="text-info">AngularJS Recursive Templates by ozkary.com</h2> <div class="row"> <div class="col-sm-12"> <nav class="navbar" style="width:250px"> <ul class="nav"> <li data-ng-repeat="item in ctrl.menu" class="collapse" data-ng-init="level=1" data-ng-include="'recursiveView'"> </li> </ul> </nav> </div> </div> <script type="text/ng-template" id="recursiveView"> <a href="{{item.url}}" class="dropdown-toggle" data-toggle="collapse" title="{{item.title}}" data-target="#nav{{item.id}}"> <i class="fa fa-fw fa-2x {{item.class}}"></i> <span class="nav-header-primary" ng-bind="item.title"></span> <span data-ng-if="item.menu" class="fa fa-caret-down fa-2x pull-right"></span> </a> <ul class="nav collapse" style="margin-left:{{level}}0px" data-ng-if="item.menu" id="nav{{item.id}}"> <li data-ng-repeat="subitem in item.menu" data-ng-init="level=level+1;item=subitem" data-ng-include="'recursiveView'"> </li> </ul> </script> </div> </div> </div>