AngularJS $compile example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="cnt">
    <h1>Hello Plunker!</h1>
    <button ng-click="addNew()">Add</button>
    <div id="placeholder"></div>
  </body>

</html>

// Code goes here

var app = angular.module('app', [])

app.directive('w34Directive',function(){
  return {
    template : "<p>test</p>"
  }
});

app.controller('cnt', function($scope, $element, $compile) {
  var placeholder = $element[0].querySelector('#placeholder');
  var added = false;
  $scope.addNew = function() {
    if(added) return;
    var el = $compile( "<div w34-directive></div>" )( $scope );
    angular.element(placeholder).append( el );
    added = true;
  };
});

/* Styles go here */