title: How can I append some angular elements to a div without doing dom manipulations in the controller?
body: <p>There is a div with some id say mainDiv. And then there are three buttons. Clicking on each button appends a different angular element with different directives to the mainDiv.</p>
  
  <pre><code>&lt;div id="mainDiv"&gt;&lt;/div&gt;
  &lt;button ng-click="appendSomeElement1ToMainDiv()"&gt;&lt;/button&gt;
  &lt;button ng-click="appendSomeElement2ToMainDiv()"&gt;&lt;/button&gt;
  &lt;button ng-click="appendSomeElement3ToMainDiv()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>How can I achieve this without using dom manipulations in controller. Its too tempting to use</p>
  
  <pre><code>$scope.appendSomeElement1ToMainDiv = function () {
    var element1 = angular.element("&lt;p&gt;I am a new element&lt;/p&gt;");
    $("#mainDiv").append(element1);
  };
  </code></pre>