Angular Material Dialog

<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://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.1.1/angular-material.min.js"></script>
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">	 
      <script language="javascript">
         angular
            .module('myApp', ['ngMaterial'])
            .controller('MyController', function ($scope, $mdDialog) {
             //controller code goes here...    
               $scope.showConfirmBox = function(ev) {
		   
		    var confirm = $mdDialog.confirm()
			  .title('Are you sure to remove this item?')
			  .textContent('It will delete all items permanently.')
			  .ariaLabel('Confirm')
			  .targetEvent(ev)
			  .ok('Yes Delete')
			  .cancel('Cancels');

		    $mdDialog.show(confirm).then(function() {
		      $scope.status = 'Item Has been Deleted.';
		    }, function() {
		      $scope.status = 'Canceled.';
		    });
		  };

	     
	  
	  });

      </script>
   </head>
   <body ng-app="myApp"> 
  <div ng-controller="MyController" ng-cloak="" >
  <md-content layout-padding layout="row">
	    <md-button class="md-primary md-raised" ng-click="showConfirmBox($event)"   >
            Confirm Box Dialog
            </md-button>
  </md-content>
  </div>
  </body>
 </html>

​x
 
<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://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.1.1/angular-material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">  
      <script language="javascript">
         angular
            .module('myApp', ['ngMaterial'])
            .controller('MyController', function ($scope, $mdDialog) {
             //controller code goes here...    
               $scope.showConfirmBox = function(ev) {
           
            var confirm = $mdDialog.confirm()
              .title('Are you sure to remove this item?')
              .textContent('It will delete all items permanently.')
              .ariaLabel('Confirm')
              .targetEvent(ev)
              .ok('Yes Delete')
              .cancel('Cancels');
​
            $mdDialog.show(confirm).then(function() {
              $scope.status = 'Item Has been Deleted.';
            }, function() {
              $scope.status = 'Canceled.';
            });
          };
​
         
      
      });
​
      </script>
   </head>
   <body ng-app="myApp"> 
  <div ng-controller="MyController" ng-cloak="" >
  <md-content layout-padding layout="row">
        <md-button class="md-primary md-raised" ng-click="showConfirmBox($event)"   >
            Confirm Box Dialog
            </md-button>
  </md-content>
  </div>
  </body>
 </html>