Recursive AngularJS Directive

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<div ng-controller="myController">
    <navigation menu="menu"></navigation>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

JavaScript

angular.element(document).ready(function(){
    
    angular.module('application', [])
     .directive("navigation", ['$compile',function ($compile) {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                menu: '='
            },
            template: '<ul><li ng-repeat="item in menu">{{item.Name}}<span ng-if="item.Children.length > 0"><navigation menu="item.Children"></navigation></span></li></ul>',
            compile: function (el) {
                var contents = el.contents().remove();
                var compiled;
                return function(scope,el){
                    if(!compiled)
                        compiled = $compile(contents);
                    
                    compiled(scope,function(clone){
                        el.append(clone);
                    });
                };
            }
        };

    }])
    
    .controller('myController', ['$scope','$log',function ($scope,$log) {
        $log.log('In Controller');
        $scope.menu = [{
            Id: 1,
            Name: "Contact",
            Children: [{
                Name: "Testing",
                Children: [{
                Name: "Testing",
                Children: []
            },{
                Name: "More Testing",
                Children: [{
                    Name: '3rd Level',
                    Children: []
                }]
            }]
            },{
                Name: "More Testing",
                Children: [{
                    Name: '3rd Level',
                    Children: []
                }]
            }]
        },{
            Id: 2,
            Name: '2nd Menu',
            Children: [{
                Name: 'Sub-menu',
                Children: []
            }]
        }];
    }]);
    
    angular.bootstrap(document,['application']);
});