Add directive from another directive in angularjs

Adding a directive from another directive makes the browser freeze.

What I'm trying to do is

1) Change the element's custom directive (for example <h7></h7>) inside the compilation function. In this case, the browser freezes.

the code:

<h7>TEST</h7>
    animateAppModule.directive('h7', function($compile){
        return {
            restrict:"E",
            compile:function(tElement, tAttrs, transclude){                
                tElement[0].setAttribute("ng-class", "{selected:istrue}");
                return function(scope, iElement, iAttrs){
                    //$compile(iElement)(scope);
                }
            }
        }
    })

If I uncomment this line //$compile(iElement)(scope);, the browser freezes. You can uncomment the above line in this script http://jsfiddle.net/NzgZz/3/ to see the browser widget.

However, the browser does not freeze if I have the template property in the directive h7, as shown in this script. http://jsfiddle.net/KaGRt/1/ .

In general, what is trying to achieve,

induvidual . - . , , .

, .

<xmastree addBaloon addSanta></xmastree>

1) , xmastree - <div class="xmastree" ng-class={blinks:isBlinking}></div>

2) , addBaloon <div class="ballon" ng-class={inflated:isinflated}></div> addBaloon 1 -

<div class="xmastree" ng-class={blinks:isBlinking}>
    <div ng-repeat = "ballon in ballons">
        <div class="ballon" ng-class={inflated:isinflated}></div>
    </div>
</div>

3) , addSanta <div class="santa" ng-class={fat:isFat}></div> addSanta 2 -

<div class="xmastree" ng-class={blinks:isBlinking}>
    <div ng-repeat = "ballon in ballons">
        <div class="ballon" ng-class={inflated:isinflated}></div>
    </div>
    <div ng-repeat = "santa in santas">
        <div class="santa" ng-class={fat:isFat}></div>
    </div>
</div>

, , 3, , HTML.