Md-dialog dysfunction trigger button wrapped within md-dialog controller

Question

I followed documentation to produce working md-dialog, but I've stuck on dysfunctional button, which triggers dialog. Once dialog opened and closed, the trigger button (everything that uses script within that controller) appears not doing it's job.

Here is CodePen and code.

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

// Dialog controller
app.controller('showDialogCtrl',
  function ($scope, $mdDialog) {
    // Showing order form dialog
    $scope.showDialog= function($event){
      $mdDialog.show({
         targetEvent: $event,
         clickOutsideToClose: true,
         scope: $scope,
         template: 
            '<md-dialog>' +
            '  <md-dialog-content>Hello!</md-dialog-content>' +
            '  <md-dialog-actions>' +
            '    <md-button ng-click="closeDialog()" class="md-primary">' +
            '      Close' +
            '    </md-button>' +
            '  </md-dialog-actions>' +
            '</md-dialog>',
         parent: angular.element(document.body),
         controller: DialogController,
      });
      function DialogController($scope, $mdDialog) {
        $scope.closeDialog = function() {
          $mdDialog.hide();
        };
      };
    }
});    

<md-button ng-controller="showDialogCtrl" ng-click="showDialog($event)">
Click
</md-button>

Answer 1

You're passing the parent $scope to your dialog, which gets automatically removed when you close the dialog. Add preserveScope: true to your dialog config so it won't get deleted once you close the dialog.

Docs: https://material.angularjs.org/HEAD/api/service/$mdDialog