Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<gt-view-manager></gt-view-manager>

CSS

gt-view {
    padding: 10px 10px 10px 20px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    display: block;
}

JavaScript

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

myApp.directive('gtViewManager', function() {

    return {
        restrict: 'E',
        scope: {},
        controller: function ($scope) {
        
            $scope.views = [
                {
                    title:'one',
                    childView: {
                        title: 'one.child',
                        childView: {
                            title: 'one.child.child'
                        }
                    }
                },
                {
                    title:'two',
                    childView: {
                        title: 'two.child'
                    }
                },
                {
                    title:'three',
                    childView: {
                        title: 'three.child'
                    }
                }
            ];
            
        },
        template: [
            '<gt-view ng-repeat="view in views" view="view"></gt-view>'
        ].join('')
    };

});

myApp.directive('gtView', function(RecursionHelper) {

    return {
        restrict: 'E',
        scope: {
            view: "="
        },
        compile: function(element) {
            return RecursionHelper.compile(element);
        },
        template: [
            '<div class="contents">',
                '<div class="gt-view-content">',
                    '<h1>{{view.title}}</h1>',
                '</div>',
                '<div class="gt-view-child-container" ng-if="view.childView">',
                    '<gt-view view="view.childView"></gt-view>',
                '</div>',
            '</div>'
        ].join('')
    };
});

myApp.factory('RecursionHelper', ['$compile', function($compile){
    return {
		/**
		 * Manually compiles the element, fixing the recursion loop.
		 * @param element
		 * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
		 * @returns An object containing the linking functions.
		...