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 ($compile) {
    return {
        restrict: 'E',
        scope: {
            text: '@'
        },
        template: '<p ng-click="add()">{{text}}</p>',
        controller: function ($scope, $element) {
            $scope.add = function () {
                var el = $compile("<test text='n'></test>")($scope);
                $element.parent().append(el);
            };
        }
    };
});

function crtl($scope) {}