Custom Directives - AngularJS

<!DOCTYPE html>
<html ng-app="customDirective">

  <head>
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Custom Directives</h1>
    <div ng-controller="baseController">
      <input type="text" ng-model="abc" />{{abc}}
          <br />
      <!-- 1) Shared Scope -->
      <custom-directive-one></custom-directive-one>
      <!-- 1) Shared Scope -->
      <br />
      <!-- 2) Inherited Scope -->
      <custom-directive-two></custom-directive-two>
      <!-- 2) Inherited Scope -->
      <br />
      <!-- 3) Isolated Scope -->
      <custom-directive-three data="abc" change="change(a)"></custom-directive-three>
      <!-- 3) Isolated Scope -->
      
      <hr />
      
      <a data-content="abc" my-dir="xxx.b">Testing Dir Attrs</a>
      
      
      
      
    </div>
  </body>

</html>

'use strict';
(function() {
  angular.module("customDirective", [])
    .controller("baseController", function($scope) {
      $scope.abc = "ABC";
      $scope.change = function(val) {
        $scope.abc = val;
      }
      $scope.xxx = {
            a:2,
            b:"test"
          }
    })
    .directive("customDirectiveOne", function() {
      console.log("customDirectiveOne")
      return {
        template: "<input type='text' ng-model='abc'> {{abc}} <button ng-click='change(123)'>change</button>",
        compile: function(element, attributes) {
          return {
            pre: function(scope, element, attributes, controller, transcludeFn) {
              console.log(element.html());
              element.append("<p>added throgh Pre Link</p>")
            },
            post: function(scope, element, attributes, controller, transcludeFn) {
              console.log(element.html())
            }
          }
        },
        link: function(scope,element) {
          console.log("link function")
        }
      }
    })
    .directive("customDirectiveTwo", function() {
      console.log("customDirectiveTwo")
      return {
        template: "<input type='text' ng-model='abc'> {{abc}} <button ng-click='change(456)'>change</button>",
        scope: true,
        controller:function($scope){
          $scope.change = function(val) {
        $scope.abc = val;
      }
        }
      }
    })
    .directive("customDirectiveThree", function() {
      console.log("customDirectiveThree")
      return {
        template: "<input type='text' ng-model='data'> {{data}} <button ng-click='update({a:789})'>change</button>",
        scope: {
          data: "=",
          update: "&change"
        }
      }
    })
    
    .directive("myDir", function() {
      console.log("myDir")
      return {
        restrict : 'A',
        transclude:true,
        template:'<button class="btn btn-primary"><ng-transclude></ng-transclude>abc</button>',
        scope: {
          myDir: "="
        },
        link : function(scope, element, attrs) {
          var obj = scope.$eval(attrs.myDir);
          console.log(attrs);
          console.log(obj);
          console.log(attrs.myDir);
          console.log(attrs.content);
          console.log(scope.data)
        }
      }
    })
    
    
    
    
})()

Custom Directives and Scopes
1) Shared Scope
2) Inherited Scope
3) Isolated Scope