How to implement hierarchical navigation in angularjs?

How would one go about implementing hierarchical navigation in angularjs? For example, given the site structure below how could it be implemented in a sidebar using angularjs?

Recipes
. Starters
. Mains
.. Chicken
.. Vegetarian
.. Italian
... Pasta
... Pizza
. Deserts

I'm happy enough using ng-repeat for a single layer, or a likely inefficient implementation of a fixed small number of layers (using nested ng-repeat's), but not sure how to proceed with an arbitrary depth of navigation.

I wouldn't worry about using nested ng-repeat directives, since a nested loop would be programatically necessary to do this. They do pretty much the same in AngularUI. Check "Sortable" directive in http://angular-ui.github.com/

The alternative would be to write a custom ng-repetable-deeply directive, which would be much more complicated and you'd end up doing a nested loop on that directive anyway.

Try this: You can use same NG-REPEAT logic for recipes in your "categories" and "recipes" too if you want data from JSON.

<ul>

<li>
<a href="#"> Recipes</a>
</li>
     <ul>
        <li>
        <a href="#"> Categories</a>
        </li>

        <ul >
        <li ng-repeat="recipe in recipes>
        <a href="#/recipes/{{recipe.id}}"> <img ng-src="{{recipe.imageUrl}}"></a>
        </li>
        </ul>

     </ul>
</ul>

Here recipes is list of recipes you have. {{recipe.id}} and {{recipe.imageURL}} is getting picked  from JSON file where all this data is available.

for controller.js:



var recipeControllers = angular.module('recipeControllers', []);

recipeControllers.controller('recipeSideListCtrl', ['$scope', '$http', 
     function ($scope, $http) { 

$http.get('app/recipes/recipe.json').success(function(data){


$scope.recipes = data;


}}]);

Rest you can use your CSS to shift this to your side bar. Hope this helps. :)