Create Modal popup inside other modal popup

Question

I am using angularjs to create modal popup. I am adding records from a popup and show list of records there itself. we need a delete action also on the popup and if user try to remove, it show a confirmation modal popup which will be actually popup inside the current popup. ANy idea how can we achive this this. I am using angular UI with bootstrap.

Answer 1

Trigger link to popup model

<a href="" ng-click="openConfirmWithPreCloseCallbackInlinedWithNestedConfirm()">Open confirm modal with pre-close inlined with nested confirm.</a>

Angular Application :

    var app = angular.module('exampleDialog', ['ngDialog']);

    app.controller('MainCtrl', function ($scope, $rootScope, ngDialog) {

    $scope.openConfirmWithPreCloseCallbackInlinedWithNestedConfirm = function () {
            ngDialog.openConfirm({
                template: 'dialogWithNestedConfirmDialogId',
                className: 'ngdialog-theme-default',
                preCloseCallback: function(value) {

                    var nestedConfirmDialog = ngDialog.openConfirm({
                        template:
                                '<p>Are you sure you want to close the parent dialog?</p>' +
                                '<div class="ngdialog-buttons">' +
                                    '<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No' +
                                    '<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes' +
                                '</button></div>',
                        plain: true,
                        className: 'ngdialog-theme-default'
                    });

                    return nestedConfirmDialog;
                },
                scope: $scope
            });
        };
    });