<!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 src="script.js"></script>
  </head>

  <body>
    <div ng-controller="AppCtrl as ctrl" 
        ng-cloak="" 
        class="virtualRepeatdemoVerticalUsage" 
        ng-app="MyApp"
        >
      <md-content layout="column">
        <md-button ng-click="ctrl.moreInfo(1)">
           Open Dialog
        </md-button>
      </md-content>
    </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(thing){
          $mdDialog.show({
          controllerAs: 'dialogCtrl',
          clickOutsideToClose: true,
          bindToController: true,
          controller: function($mdDialog){
            this.click = function click(){
              $mdDialog.show({
                skipHide: true,
                controllerAs: 'dialogCtrl',
                controller: function($mdDialog){
                  this.click = function(){
                    $mdDialog.hide();
                  }
                },
                template: '<md-dialog class="confirm"><md-conent>I am in a 2nd dialog!<md-button class="md-raised" ng-click="dialogCtrl.click()">Confirm!</md-button></md-conent></md-dialog>'
              })
            }
          },
          autoWrap: false,
          template: '<md-dialog class="stickyDialog" data-type="{{::dialogCtrl.thing.title}}"><md-conent>I am in a dialog!<md-button class="md-raised" ng-click="dialogCtrl.click()">Click me to do something</md-button></md-conent></md-dialog>',
          locals: {
            thing: thing
          }
        })
      }
    });

})();
/* Styles go here */