Recursive Custom DIrective Example

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <input type="text" ng-model="userName"/>
        <button ng-click="changeValue()">Change</button>
        <tree family>
        </tree>
    </div>
</div>

CSS

tree {
    margin-left: 20px;
    display: block;
}

JavaScript

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

module.controller("TreeCtrl", function($scope, $rootScope) {
    $scope.treeFamily = {
        name : "Parent"
    };
    
    $scope.changeValue = function()
    {
        $rootScope.name = $scope.userName;
    };
    
});

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {},
        template:'<div>sample</div>',
        link : function(scope, elm, $attrs) {
           function update()
           {
           };
           scope.$watch('name', function(newVal, oldVal) {
				console.log('calling');
               update();
			}, true);  
        }
    };
});