Alert and Confirmation dialog box AngularJs

Question

I'm trying to implement Alert/Confirmation dialog boxes using the bootstrap modal service in my angular app. I want to make it generic, based on the parameter that I pass to the modal's controller it will either behave as the alert box where the user can just close it on reading the message on the modal and also it can behave like a confirmation dialog where the user should say either 'OK' or 'Cancel' I need to capture the response from the user which I'm able to. Now, the problem here is that i've list of items say in a grid and when ever user wants to delete an item from the list I need to show the confirmation message box and based on the user response I need to either delete the item or leave it if users wishes to leave it in the list, but my item is being deleted first and then the confirmation dialog is showing up, I've tried using the call back but still no use. Please help me if anyone came across this situation.

Method that shows the alert:

$scope.showAlertMessage = function (modalName,commands,callback)
    {
        var modalOptions = {};
        var alertMessageText;       
        var okBtn;
        var cancelBtn;
        var autoCloseTimeout;        
        $scope.modalResp === false;

        if (modalName === 'ItemNotEligible')
        {
            modalOptions['template'] = 'application/Views/ItemNotEligibleAlert.html';
            modalOptions['cntrlr'] = 'itemAlertsController';
            modalOptions['winClass'] = 'item-alert-win';
            alertMessageText = commands.alertMessage.text;            
            okBtn=true;
            cancelBtn = false;
            autoCloseTimeout=commands.alertMessage.autoDismissalTimeout;

        }
        else if (modalName === 'ItemDelete')
        {
            modalOptions['template'] = 'application/Views/ItemNotEligibleAlert.html';
            modalOptions['cntrlr'] = 'itemAlertsController';
            modalOptions['winClass'] = 'item-alert-win';
            alertMessageText = commands.alertMessage.text;            
            okBtn = true;
            cancelBtn = true;
            autoCloseTimeout = commands.alertMessage.autoDismissalTimeout;
        }

        var params = { alertMessage: alertMessageText};

        var modalInstance=$modal.open({
            templateUrl: modalOptions.template,
            controller: modalOptions.cntrlr,
            windowClass: modalOptions.winClass,
            resolve: {
                modalParams: function () {
                    return params;
                }
            }
        });

        modalInstance.result.then(function (selected) {
            $scope.modalResp = selected; //Response from the dialog
        });
        callback($scope.modalResp);
    }

Method where the delete item logic exists and call to show alert method is made

this.voidItem = function (skuid) {

        alertMessage.text = 'Are you sure you want to remove <strong>' + itemdata[itmid].split('|')[0] + '</strong> from your list?';

        $scope.showAlertMessage('ItemDelete', commands, function (userresp) {
            if (userresp === true) {
                var lineId = 0;

                for (var i = itemListState.length - 1; i >= 0; i--) {
                    if (parseInt(itemListState[i].item) === itmid && Boolean(itemListState[i].isItemVoid) != true) {
                        lineId = itemListState[i].Id;
                        if (lineId != 0) {
                            break;
                        }
                    }
                }

                poService.DeleteItem(itmid, lineId, function (modal) {
                    virtualtable = modal;
                    $scope.itemCount = $scope.itemCount - 1;
                    $scope.createlist(itmid);
                });
            }
        });
    }

Answer 1

The problem is that you are executing the callback instead of chain the method to the result of the promise

  modalInstance.result.then(function (selected) {
        callback($scope.modalResp); //Once the promise is solved, execute your callback
        $scope.modalResp = selected; //Why you need to save the response?
    // If the user press cancel o close the dialog the promise will be rejected 
    }, onUserCancelDialogFn);        

A more simple way:

  modalInstance.result
    .then(callback, onErrBack);