Dynamically add directives in AngularJS

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
  <script>
    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));
        });
      };
    });
  </script>
</head>

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

</html>

/* Styles go here */

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

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