angular repeat problem

by paulocoelho

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div ng-app="testApp" ng-controller="crtl">
    <test text="1"></test>
    <test text="2"></test>
</div>

CSS

*{ font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, arial, sans-serif; font-size:1.1em;}

JavaScript

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(){
                // does not compile :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

function crtl($scope){}