Dynamically add directives in AngularJs

Hi, I am going to share the code sample for dynamically add directives using AngularJs. i.e. 

We can say, we want to add a div that adds more divs or any other elements that do something when you click any buttons etc. 

Table of Context : Click for live demo 

1. HTML code sample 
2. CSS code sample
3. AngularJs directives code sample

1 2 3 4 5 6 7 8	//HTML code sample <div ng-app="dAddApp">   <section ng-controller="dAddCtrl">     <display-Button-For-Add-Div></display-Button-For-Add-Div>     <div id="displayDivs"></div>   </section> </div>

//HTML code sample

<div ng-app="dAddApp">
  <section ng-controller="dAddCtrl">
    <display-Button-For-Add-Div></display-Button-For-Add-Div>
    <div id="displayDivs"></div>
  </section>
</div>

01 02 03 04 05 06 07 08 09 10 11 12 13	//css code sample .borderCss{      border-style: solid;     border-color: #ff0000 #0000ff;      padding:0.3em;     margin: 0.3em; } .btn{      border-style: solid;     border-color: green; }

//css code sample

.borderCss{
     border-style: solid;
    border-color: #ff0000 #0000ff;
     padding:0.3em;
    margin: 0.3em;
}

.btn{
     border-style: solid;
    border-color: green;
}

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//AngularJs directives code sample: This is the main part. var app = angular.module('dAddApp', []);      //This is controller, where initialize the count default values.     app.controller('dAddCtrl', function($scope) {       $scope.count = 0;     });      //This directive that returns an element which adds DIV on displayButtonForAddDiv click.     app.directive("displayButtonForAddDiv", function() {       return {         restrict: "E",         template: "<div class='btn'><button adding>Click to add dynamically div</button> </div>"       }     });      //This directive for adding DIV on adding button click .     app.directive("adding", function($compile) {       return function(scope, element, attrs) {         element.bind("click", function() {           scope.count++;           angular.element(document.getElementById('displayDivs')).append($compile("<div class='borderCss' data-alert=" + scope.count + ">Show Div --> " + scope.count + "</div>")(scope));         });       };     });

//AngularJs directives code sample: This is the main part.

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

     //This is controller, where initialize the count default values.
    app.controller('dAddCtrl', function($scope) {
      $scope.count = 0;
    });

     //This directive that returns an element which adds DIV on displayButtonForAddDiv click.
    app.directive("displayButtonForAddDiv", function() {
      return {
        restrict: "E",
        template: "<div class='btn'><button adding>Click to add dynamically div</button> </div>"
      }
    });

     //This directive for adding DIV on adding button click .
    app.directive("adding", function($compile) {
      return function(scope, element, attrs) {
        element.bind("click", function() {
          scope.count++;
          angular.element(document.getElementById('displayDivs')).append($compile("<div class='borderCss' data-alert=" + scope.count + ">Show Div --> " + scope.count + "</div>")(scope));
        });
      };
    });