Closing all open Bootstrap modals in AngularJS? -

Closing all open Bootstrap modals in AngularJS? -

i have created modal opens modal. want utilize sec modal confirmation box close first one. cant close both modals when click ok on confirmation box (the sec 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 @ 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()); }); }; }]);

you can utilize $modalstack ui.bootstrap close instances of $modalinstance

$modalstack.dismissall(reason);

angularjs twitter-bootstrap modal-dialog