You have a lot of pointless jQuery in there, but the $compile service is actually super simple in this case:
.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 );
};
}
};
});
You’ll notice I refactored your directive too in order to follow some best practices. Let me know if you have questions about any of those.