AngularJS - Tree/Nav Render

http://angularjs.org/

by gavinfoley

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div ng-app="Application" ng-controller="TreeController" ng-cloak>   
    <div class="input-append">      
        <input class="span2"  ng-model="search" id="inputIcon" type="text" />
        <span class="add-on"><i class="icon-search"></i></span>
    </div>
    <div>
        <strong  ng-show="search.length > 0">Matching results: {{ (displayTree|filter:search).length }}</strong>
        
        <ul>
            <li ng-repeat="data in displayTree | filter:search" ng-include="'tree_item_renderer.html'"></li>
        </ul>
        
        <script type="text/ng-template"  id="tree_item_renderer.html">       
   
            <a href="{{data.url}}">{{data.name}}</a>     
            <span ng-show="data.children" class="showChildren"> &gt; </span>  
           
            <ul ng-show="data.children">        
                <span class="backLink"> &lt; </span>    
                <a href="{{data.url}}">{{data.name}}</a> 
                
                <li ng-repeat="data in data.children" ng-include="'tree_item_renderer.html'"></li>
            </ul>
        
        </script>
        
        
        
        
    </div>
        <sub>displayTree JSON : <br /></sub> 
        <pre>{{ displayTree | json | filter:search }}</pre>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function ($scope) {
    // http://www.jsonmate.com/permalink/a2a98c7b7e09a3526ce29798ea1bb926
    $scope.fullTree = [
    {
        "name": "Home",
        "url": "#",
        "children": []
    },
    {
        "name": "About Us",
        "url": "#",
        "children": [
            {
                "name": "Lvl.2 Page 1",
                "url": "#",
                "children": []
            },
            {
                "name": "Lvl.2 Page 2",
                "url": "#",
                "children": []
            },
            {
                "name": "Lvl.2 Page 3",
                "url": "#",
                "children": [
                    {
                        "name": "Lvl.3 Page 1",
                        "url": "#",
                        "children": []
                    },
                    {
                        "name": "Lvl.3 Page 2",
                        "url": "#",
                        "children": []
                    },
                    {
                        "name": "Lvl.3 Page 3",
                        "url": "#",
                        "children": []
                    },
                    {
                        "name": "Lvl.3 Page 4",
                        "url": "#",
                        "children": []
                    },
                    {
                        "name": "Lvl.3 Page 5",
                        "url": "#",
                        "children": []
                    }
                ]
            },
            {
                "name": "Lvl.2 Page 4",
                "url": "#",
                "children": []
            },
            {
                "name": "Lvl.2 Page 5",
                "url": "#",
                "children": []
            }
        ]
    },
    {
        "name": "News",
        "url": "#",
        "children": []
    },
    {
        "name": "Events",
        "url": "#",
       ...