javascript - How to add Angular-enabled elements to DOM? -

i add angular-enabled dom elements programmatically. actually, need add custom components. how can it?

here's trivial fiddle demonstrate issue: http://jsfiddle.net/zjsz4/2/

html:

<div ng-app="main">     <div ng-controller="myctrl">         <button ng-click="add()" >add</button>         <div id="container">             <div>{{test}}</div>         </div>     </div> </div> 

js:

angular.module("main", []).controller("myctrl", function($scope) {     $scope.add = function() {         $("#container").append("<div>{{test}}</div>");     };      $scope.test = 'test message'; }); 

just in case, expect add div showing "test message" each click - not {{test}}.

why need it? well, have few sortable columns (in jquery sortable sense) portlets. imagine each portlet component.

am climbing wrong hill? angular way solve this?

edit: hoped simplistic example wouldn't end way, anyway. ultimate goal not display div each element in array.

what want more complex controller. need portlet container interesting behavior. may need decide place each portlet in different column. may offer changing layout , have decent way reorganize portlets in such event. , on.

although not entirely sure desired outcome is, want sure dom manipulation done within directive , not inside controller.

this jsfiddle example should going in right direction.

http://jsfiddle.net/zjsz4/5/

<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));         }     } }; });