У меня есть очень упрощенная версия того, что я делаю, и эта проблема решается.

У меня простойdirective, Каждый раз, когда вы нажимаете на элемент, он добавляет еще один. Тем не менее, он должен быть скомпилирован в первую очередь, чтобы правильно отобразить.

Мои исследования привели меня к$compile, Но во всех примерах используется сложная структура, которую я не знаю, как применить здесь.

Скрипки здесь:http://jsfiddle.net/paulocoelho/fBjbP/1/

И JS здесь:

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

Решение Джоша Дэвида Миллера:http://jsfiddle.net/paulocoelho/fBjbP/2/