Edit in JSFiddle

angular.module('dialogDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.status = '  ';
  $scope.showAlert = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    // Modal dialogs should fully cover application
    // to prevent interaction outside of dialog
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .content('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
  };
});

<div ng-app="dialogDemo1">
    <div ng-controller="AppCtrl" class="md-padding ng-scope" id="popupContainer">

      <div class="dialog-demo-content layout layout-row layout-wrap">
        <button class="md-primary md-raised md-button md-default-theme flex-md flex-md-100 flex" ng-click="showAlert($event)"><span class="ng-scope">
          Alert Dialog
        </span><div class="md-ripple-container"></div></button>
      </div>

    </div>
</div>

.dialogdemoBasicUsage #popupContainer {
  position: relative; }
.dialogdemoBasicUsage .debt-be-gone {
  font-weight: bold;
  color: blue;
  text-decoration: underline; }
.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px; }
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px; }