angular repeat problem

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.isLoaded=false;
      $scope.add = function () {
      if($scope.isLoaded==false)
      {
      var t = 'n' + $scope.text;
        var el = $compile( "<test text='"+t+"'></test>" )( $scope );
        $element.parent().append( el );
        $scope.isLoaded=true;
        }
      };
    }
  };
});

function crtl($scope) {}