js .append（）Angular指令未编译

Question

Simplified I have the following problem, I want to append to a div using the jquery function .append(), an Angular directive and it won't work. I've created a jsfiddle to make my point. http://jsfiddle.net/H26eg/2/

Do you have any idea why isn`t it working and what should i do?

I think it is related to this http://docs.angularjs.org/api/ng.$compile but can`t figure it out..

Thanks a lot !

EDIT: I've managed to do the above using two directive, calling one directive from the other like this: http://jsfiddle.net/H26eg/6/ . The problem is if instead of regular template:"html_text" in anpr directive I use templateUrl: "path_to_html_file" again it won't compile the directive. Can somebody please tell me how to compile the templateUrl directive ?

Answer 1

Finaly done it using a controller function:

<div data-ng-controller="SetupController">

    <input data-ng-click="addAnpr('tabs_1','anpr')" type="button" value="Add"/>

    <div id="tabs_1">

    </div>

</div>  

..

app.controller('SetupController', function ($scope, $compile) {
$scope.addAnpr = function (tab,drctv) {
    var el = $compile('<'+drctv+'/>')($scope);
    $('#'+tab).append(el);
}
});

app.directive('anpr', function () {
    return{
        restrict: 'E',
        templateUrl: 'app/partials/SETUP/anprTab.html'
    }
});