将html元素附加为与angularjs javascript嵌套

Question

我有一个名为hero的自定义指令我想为多个heros创建一个嵌套视图。 Demo

我希望得到这样的观点：

<hero a="1">
    <hero a="2">
        <hero a="3">
            <hero a="4"></hero>
        </hero>
    </hero>
</hero>

和控制器是这样的：

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

function MyCtrl($scope) {
    var elements = [
        angular.element('<hero a="1"></hero>'), 
        angular.element('<hero a="2"></hero>'), 
        angular.element('<hero a="3"></hero>'),
        angular.element('<hero a="4"></hero>')
    ];

    var content;

    for(var i = 0; i < elements.length; i++){

        if(!content){
                content = elements[i];
        }else{
                content.append(elements[i]);            
        }
    }

    console.log(content[0]);        
}

但似乎：

<hero a="1">
    <hero a="2"></hero>
    <hero a="3"></hero>
    <hero a="4"></hero>
</hero>