md-Dialog close button of template directive

<!DOCTYPE html>
<html>

  <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.2/angular-material.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.2/angular-material.layouts.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.2/angular-material.min.js"></script>
   <script  type="text/javascript" src="//cdn.rawgit.com/Harelebel/a8f20463c2d739eb616223e060e7dcc7/raw/9ff7267d4beb255816f59abf4289d0cd0a6d3488/compressed.js"></script>
    <script src="script.js"></script> 
  </head>

  <body ng-app="MyApp">
     <div ng-controller="AppCtrl as ctrl"  ng-cloak="" 
        class="virtualRepeatdemoVerticalUsage">
         <md-content layout="column">
        <md-button ng-click="ctrl.moreInfo()">
           Open Dialog
        </md-button>
         <md-button ng-click="ctrl.showMap()">
           Start MapMip
        </md-button>
      </md-content>
      </div>
      <div id ="map" style="height=60%; width = 50%"></div>
  </body>

</html>

// Code goes here

(function () {
  'use strict';

    angular
      .module('MyApp', ['ngMaterial'])
       
    .controller('AppCtrl', function($interval, $mdDialog) {
      var vm = this;  
      
      vm.moreInfo = function moreInfo(ev) {
       $mdDialog.show({
       controllerAs:'myDirectiveCtrl',
        clickOutsideToClose:true,
                  bindToController: true,
       controller: function($mdDialog){
        let vm = this;
        vm.hide = function hide(){
          $mdDialog.hide();
        }
      },
      template: '    <md-button ng-click="myDirectiveCtrl.hide()" class="md-primary">' +
      '      Close Dialog' +
      '    </md-button>'+
      '<my-directive></my-directive>',
      parent: angular.element(document.body.childNodes[1]), // index: build - 1 , localhost -5
  

  });
};
      
      vm.showMap = function showMap(){
        new this.Mapmip("map");
      };
      
    })
    
    .directive('myDirective',function(){
        return{
        restrict:'E',
        scope:{},
        template:'<h4>{{vm.greeting}}</h4>',
        controllerAs:'vm',
        controller: function () {
            var vm=this;

            vm.greeting = "I'm a new directive, close me!";
        }
    };
      
    });
})();