Although I am not entirely sure what the desired outcome is, you do want to be sure that all DOM manipulation is done within a directive and not inside your controller.
This JSfiddle example should get you going in the right direction.
<div ng-app="main">
<div ng-controller="MyCtrl">
<div id="container">
<button ng-click="add()" >Add</button>
<ng-portlet></ng-portlet>
</div>
</div>
angular.module("main", []).controller("MyCtrl", function($scope) {
$scope.test = 'Test Message';
}).directive("ngPortlet", function ($compile) {
return {
template: '<div>{{test}}</div> ',
restrict: 'E',
link: function (scope, elm) {
scope.add = function(){
console.log(elm);
elm.after($compile('<ng-portlet></ng-portlet>')(scope));
}
}
};
});