点击时递归添加新的指令实例

我试图创建一个Angular指令，通过点击元素递归地填充数据(通过$http加载)。一开始应该只有一个按钮。单击按钮后，通过$http从远程源加载数据，创建、编译并将每个子指令的新实例附加到父实例中。这些子指令也是按钮，应该加载和附加它们的子数据，也就是说，孙子被嵌套到子指令中，等等。

下面的代码正确加载并追加了第一个子指令，但是点击追加的指令会创建新的指令，这些指令会追加到根指令。似乎element.append()总是指向根。

有人知道我哪里错了吗?

app.directive('sectionloader',['$compile', 'sectionService', '$http', 
    function($compile, sectionService, $http){
    return  {
        restrict : 'E',
        template: '<button>loadSection</button><br>',
        scope : {sectionId:'@'}, 
        terminal: false,
        link: function link(scope, element, attrs) {
            element.bind('click', function(){
                sectionService.loadBySectionId(attrs.sectionId, function(data){
                    var sectionHtmlLocation = "http://remoteserver/sectionhtml.html"
                    scope.section=data;
                    scope.subsections = [];
                    data.subsections.forEach(function(id){
                        sectionService.loadBySectionId(id,function(data){
                            scope.subsections.push(data);
                        });
                    });
                    $http.get(sectionHtmlLocation).success(function(data){
                    var compiledData = $compile(data)(scope.$new());
                    element.append(compiledData);
                    });
                });
            });
        }
    }
}]);

编译和附加的模板为:

<div class="subsections">
    <ul>
        <li ng-repeat="subsection in subsections">
            {{subsection.sectionName}}
            <sectionloader sectionid="{{subsection.sectionId}}"></sectionloader>
        </li>
    <ul>
</div>