Edit in JSFiddle

angular.module("app", ['ui.bootstrap']).
controller("MyAppCtrl", function ($scope, $modal) {
    $scope.hello = "World";
    $scope.open = function () {
        $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'MyModalCtrl'
        });
    };
})
.controller("MyModalCtrl", function ($scope, $modal) {
    $scope.openInner = function () {
        $modal.open({
            templateUrl: 'myInnerModalContent.html'
        });
    };
}).directive('cachedTemplate', ['$templateCache', function ($templateCache) {
        "use strict";
        return {
            restrict: 'A',
            terminal: true,
            compile: function (element, attr) {
                if (attr.type === 'text/ng-template') {
                    var templateUrl = attr.cachedTemplate,
                        text = element.html();

                    $templateCache.put(templateUrl, text);
                }
            }
        };
    }])

<div class="container" ng-controller="MyAppCtrl">
    <button class="btn btn-default" ng-click="open()">Open me!</button>
</div>
    <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header"><h3>I'm a modal!</h3></div>
    <div class="modal-body"><p>Modal body</p></div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="openInner()">Open Inner dialog</button>
        <button class="btn btn-warning" ng-click="$close()">Cancel</button>
    </div>
    <div data-cached-template="myInnerModalContent.html" type="text/ng-template">    
        <div class="modal-header"><h3>I'm inner modal!</h3></div>
        <div class="modal-body"><p>Inner modal body</p></div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="$close()">Cancel</button>
        </div>
    </div>
</script>

*[type="text/ng-template"]{
    display: none;
}
.container{
    height:290px; 
    border:1px solid #ddd;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}