Edit in JSFiddle

angular.module("app", ['ui.bootstrap']).
controller("MyAppCtrl", function ($scope, $modal) {
    $scope.hello = "World";
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'MyModalCtrl'
        });
    };
})
.controller("MyModalCtrl", function ($scope, $modal) {
    $scope.openInner = function () {
        var modalInstance = $modal.open({
            templateUrl: 'myInnerModalContent.html'
        });
    };
});

<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>
    <script type="text/ng-template" id="myInnerModalContent.html">    
        <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>
    </script>
</script>

.container{
    height:290px; 
    border:1px solid #ddd;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}