title: How to add Angular-enabled elements to DOM?
body: <p>I would like to add some Angular-enabled DOM elements programmatically. Actually, I probably will need to add custom components. How can I do it?</p>
  
  <p>Here's a trivial fiddle to demonstrate the issue: <a href="http://jsfiddle.net/ZJSz4/2/">http://jsfiddle.net/ZJSz4/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="main"&gt;
      &lt;div ng-controller="MyCtrl"&gt;
          &lt;button ng-click="add()" &gt;Add&lt;/button&gt;
          &lt;div id="container"&gt;
              &lt;div&gt;{{test}}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module("main", []).controller("MyCtrl", function($scope) {
      $scope.add = function() {
          $("#container").append("&lt;div&gt;{{test}}&lt;/div&gt;");
      };
  
      $scope.test = 'Test Message';
  });
  </code></pre>
  
  <p>Just in case, I expect it to add a div showing "Test Message" for each click - not {{test}}.</p>
  
  <p>Why do I need it? Well, I would like to have a few sortable columns (in jQuery sortable sense) with portlets. I imagine each portlet could be a component.</p>
  
  <p>Am I climbing the wrong hill? What is the Angular way to solve this?</p>
  
  <p><strong>EDIT</strong>: I hoped this simplistic example wouldn't end that way, but anyway. The ultimate goal is not to display a div for each element in an array.</p>
  
  <p>What I really want is a more complex controller. I need a portlet container with some interesting behavior. It may need to decide to place each portlet in a different column. It may offer changing the layout and have a decent way to reorganize portlets in such event. And so on.</p>