javascript - AngularJS Directive menu template by a json with submenu -

i'm new student of angularjs. want create menu submenus .json. dynamic menu can add menus , submenus same .json.

<a href="#" ng-repeat="item in menuheader">{{item.nav.menu[x].subitens[x].nome}} </a> 

i think way acess element inside other element, in view of can have multiple submenus , menus. tried loop inside, .html template... can me resolve or show me other way?

here's demo: click here!

thanks lot!

try hope work per expectation :

var app = angular.module('myapp', []);    function ctrl($scope) {      var data = [      {          "nav": {              "menu": [                    {                      "id": 0,                      "nome": "menu 1",                      "subitens": [                          {                              "id": 0,                              "nome": "sub menu 1"                          },                            {                              "id": 1,                              "nome": "sub menu 2"                          },                            {                              "id": 2,                              "nome": "sub menu 3"                          }                      ]                  },                    {                      "id": 1,                      "nome": "menu 2",                      "subitens": [                          {                              "id": 0,                              "nome": "sub menu 1_2"                          },                                                    {                              "id": 1,                              "nome": "sub menu 2_2"                          }                      ]                  },                                    {                      "id": 2,                      "nome": "menu 3",                      "subitens": [                          {                              "id": 0,                              "nome": "sub menu 1_3"                          }                      ]                  }                ]          }      }  ];        $scope.menulinks = data[0].nav.menu;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" ng-controller="ctrl">                      <ul class="nav">                          <li ng-repeat="link in menulinks"><a href="{{link.url}}" class="{{link.sub && 'dropdown-toggle' || ''}}" data-toggle="{{link.sub && 'dropdown' || ''}}">{{link.nome}}                          </a>                              <ul class="dropdown-menu" ng-show="link.subitens">                                  <li ng-repeat="subitem in link.subitens"> <a href="#123">{{subitem.nome}}</a>                                  </li>                              </ul>                          </li>                      </ul>  </div>