How can I append some angular elements to a div without doing dom manipulations in the controller?

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.

<div id="mainDiv"></div>
<button ng-click="appendSomeElement1ToMainDiv()"></button>
<button ng-click="appendSomeElement2ToMainDiv()"></button>
<button ng-click="appendSomeElement3ToMainDiv()"></button>

How can I achieve this without using dom manipulations in controller. Its too tempting to use

$scope.appendSomeElement1ToMainDiv = function () {
  var element1 = angular.element("<p>I am a new element</p>");
  $("#mainDiv").append(element1);
};