AngularJS 1.4.x

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

app.controller('MainCtrl', function($scope, $rootScope, $mdDialog) {
    $scope.startTest = function() {
        console.clear();
        console.log('hello world');
        show_test_dialog(1);
        show_test_dialog(2);
        show_test_dialog(3);
        show_test_dialog(4);
    };

    function show_test_dialog(indexNumber) {
        var $ct = angular.element(document.getElementById('c' + indexNumber) || angular.element('<md-content class="test-container md-whiteframe-8dp" flex="noshirnk">').attr('id', 'c' + indexNumber)[0]);
        $ct.html('<h1>' + indexNumber + '</h1>');
        document.getElementById('mainContainer').appendChild($ct[0]);

        var preset = $mdDialog.confirm()
            .ok('hide')
            .cancel('cancel')
            .clickOutsideToClose(false)
            .title('dialog ' + indexNumber + '!')
            .textContent('this is the dialog ' + indexNumber)
            .parent($ct[0])
            .disableParentScroll(false)
            .ariaLabel('test dialog');
            
        // same result with custom template, use preset here
        preset._options.bindToController = true;
        preset._options.skipHide = true;
        preset._options.isolateScope = false;
        preset._options.preserveScope = true;
        preset._options.fullscreen = false;
        preset._options.backdrop = false;

        $mdDialog.show(preset).then(function(data) {
            console.log('You clicked HIDE on dialog %s', indexNumber);
        }, function(e) {
            console.log('You clicked CANCEL on dialog %s', indexNumber);
        });
    }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Material stacked modal dialog</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.css" />
    <style>
        .test-container {
            position: relative;
            height: 400px;
        }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.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="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.js"></script>

    <script src="app.js"></script>
</head>

<body>
    <div ng-controller="MainCtrl">
    <h1>Hello Material Angular</h1>

    <md-button ng-click="startTest()" class="md-raised md-primary">Show Some Dialogs !!</md-button>

    <p>
        you will see different closing order by click HIDE and CANCEL
    </p>

    <div id="mainContainer" layout-padding style="height:800px;"></div>
    </div>
</body>

</html>