Dynamically creating nested navigation menu item using Bootstrap and Angularjs

What I want to achieve is dynamically creating a menu in bootstrap based on a json using angularjs.

The json looks like this:

 {
    "Page A":"page_A.html",
    "Page B":{
        "Page B1":"page_B/page_B1.html",
        "Page B2":"page_B/page_B2.html",
        "Page B3":{
            "Page B3-a":"page_B/page_B3/page_a.html",
            "Page B3-b":"page_B/page_B3/page_b.html"
        }
    },
    "Page C":"page_C.html"
}

where The object key is the name of the page and object value is the physical file location.

The angular app.js look like this

app.controller('navCtrl', function($scope, $http) {
    $http.get('data/menu.json').success(function(data) {
        $scope.menus   = data;
    });
});

where menus is stores the json

The HTML bootstarp look like this (Work in progress, doesn't work)

<div class="navbar-default sidebar" role="navigation">
       <div class="sidebar-nav navbar-collapse">
            <ul class="nav" id="side-menu">
                <li ng-repeat="(key,value) in menus">
                     <a href="../{{value}}"><i class="dropdown-toggle"  data-toggle="dropdown"></i> {{key}} </a>
                 </li>
             </ul>
       </div>
</div>

My Question:

• How can I create nested navbar item based on the json?
• Is there any other Angularjs directive that can do better in terms of recursion and nested beside ng-repeat?
• Should I change my json convention to make it easier? If so, How?

I am new to both Angularjs and Bootstrap. Please be gentle.