Dynamically add directives in AngularJS

For a walkthrough see http://blog.fourtonfish.com/post/74055065673/dynamically-add-directives-in-angularjs-no-jquery

by Sajeetharan Sinnathurai

HTML

<section ng-app="myApp" ng-controller="reviewCtrl">
    <big-Box></big-Box>
    <div id="space-for-buttons"></section>
</section>

CSS

section{
    padding: 2em;   
}
button{
    padding:0.3em;
    margin: 0.3em;
}
.test{
    background:green;
}
}

JavaScript

var myApp = angular.module('myApp', []);

function reviewCtrl($scope) {
	$scope.count = 0;
}

//Directive for showing an alert on click



myApp.directive('bigBox', [function() {
  return {
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        console.log ('click')
      });
    }
  }
}]);
myApp.directive("datePicker", function() {
    return {
        restrict: "E",
        template: '<div>I want this to show up in my review view</div>'
  }      
});