Closing all open Bootstrap modals in AngularJS?

Question

I have created a modal that opens another modal. I want to use the second modal as a confirmation box to close the first one. I cant get it to close both modals when I click ok on the confirmation box (the second modal).

Tree.html:

<script type="text/ng-template" id="tree_item_renderer.html">
<div class="bracket-match" ng-class="match.tier == 1 ? 'bracket-match-final' : ''">
    <p ng-show="match.tier == 1" class="finale-title">Finale</p>
   <div class="match-content">
        <div class="player-div">
           <div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
                <input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
           </div>
       </div>
        <div class="player-div border-bottom">
            <div class="bracket-player-2">
                <input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
           </div>
      </div>
    </div>
    <div ng-show="match.tier == 1 && showthirdplace && tierCount >= 2" class="third-place" ng-model="thirdplace">
        <p class="finale-title">3. plads</p>
        <div class="match-content">
            <div class="player-div">
              <div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
                    <input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
               </div>
           </div>
            <div class="player-div border-bottom">
                <div class="bracket-player-2">
                    <input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
               </div>
           </div>
  </div>
    </div>
</div>
<div class="bracket-column">
    <div ng-repeat="match in match.previousMatches" ng-include="'tree_item_renderer.html'" />
</div>
</script>
<script type="text/ng-template" id="tournament-tree.html">
<div class="row modal-footer-btns">
    <button class="btn btn-primary" ng-click="ok()">GEM</button>
    <button class="btn btn-warning btn-xs" ng-click="openAlertBox()" type="button" data-dismiss="modal">LUK, uden at gemme</button>
</div>
 <div class="row" style="margin-bottom:15px;">
       <a ng-click="addMatchTier()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></a>
    <a ng-click="removeMatchTier()" ng-class="tierCount > 1 ? 'btn btn-primary' : 'btn btn-default'"><i class="glyphicon glyphicon-minus"></i></a><br />
 </div>

<div class="row tournament-tree">
    <div ng-repeat="match in finalMatch">
    </div>
    <div class="bracket-column">
       <div ng-repeat="match in finalMatch" ng-include="'tree_item_renderer.html'"></div>
    </div>
</div>
</script>

<script type="text/ng-template" id="openAlertBox.html">
<div class="modal-header">
    <h3 class="modal-title"></h3>
</div>
<div class="modal-body">    </div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">Ja</button>
    <button class="btn btn-warning" ng-click="cancel()">Annuller</button>
</div>
</script>

Categories.html:

<div class="row">
<div class="modal-header">
    <h3 class="modal-title"></h3>
</div>
</div>
<div ng-controller="CategoriesController">
<a ng-click="add()" class="btn btn-tree btn-primary" style="margin-top:15px;">Tilføj hovedkategori</a>
<p ng-repeat="data in nodes" ng-include="'category_item_renderer.html'"></p>

<ng-include src="'Modules/TournamentTree/Tree.html'"></ng-include>
</div>


<script type="text/ng-template" id="category_item_renderer.html">
<div class="category-style">
    <div class="push-cat-btn">
        <a ng-click="add(data)" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon glyphicon-plus"></i></a>
        <a ng-hide="data.nodes.push()" ng-click="openTournamentTree(data)" class="btn btn-info btn-xs">Turnering</a>
    </div>
</div>

<p class="push" ng-repeat="data in data.nodes" ng-include="'category_item_renderer.html'"></p>

</script>

<script type="text/ng-template" id="TournamentTreeModal.html">
<div class="modal-header">
    <h3 class="modal-title"></h3>
</div>
<div class="modal-body">
    <div class="include-tree" ng-include="'tournament-tree.html'"></div>
</div>
<div class="modal-footer">

</div>
</script>

---

TreeController.js:

angular.module('tournamentTree', ['ui.bootstrap']);
angular.module('tournamentTree').controller("TreeController", ['$scope', '$modal', '$modalInstance', 'guidGenerator', function ($scope, $modal, $modalInstance, guidGenerator) {

$scope.openAlertBox = function () {

    var alertBoxInstance = $modal.open({
        templateUrl: 'openAlertBox.html',
        controller: 'TreeController',
        scope: $scope,
        size: 'xs',
        resolve: {

        }
    });
};

$scope.ok = function () {
    $scope.close();
    $scope.$parent.close();
}

$scope.cancel = function () {
    $scope.close();
    $scope.$parent.dismiss('cancel');
};

---

categoriController.js:

angular.module('tournamentCategories').controller("CategoriesController",
    ['$scope', '$modal', 'guidGenerator', 'eventBus', domainName + "Service", 'TournamentCategoryModelFactory',
    function ($scope, $modal, guidGenerator, eventBus, domainService, modelFactory) {

    $scope.openTournamentTree = function () {
        var modalInstance = $modal.open({
            templateUrl: 'TournamentTreeModal.html',
            controller: 'TreeController',
            scope: $scope,
            size: 'wide-90',
            backdrop: 'static',
            keyboard: false,
            resolve: {

            }
        });

        modalInstance.result.then(function (selectedItem) {
            //$scope.selected = selectedItem;
        }, function () {
            //$log.info('Modal dismissed at: ' + new Date());
        });
    };
}]);

Answer 1

You can use $modalStack from ui.bootstrap to close all instances of $modalInstance

$modalStack.dismissAll(reason);