Download
Download the Latest version and use files in the /dist/ folder.

via Bower:
$ bower install angular1-confirm

Dependencies:

• Angular >= 1.5
• Bootstrap by Twitter >= v3 (optional, if you want to use responsive layouts)
• jQuery library >= v1.8

Buttons can be defined in the following fashion, pretty self explanatory.

$ngConfirm({
    buttons: {
        hello: function(scope, button){
            // button action
        },
        hey: function(scope, button){
            button.setDisabled(true); // disable the current button.
            button.setText('heyyyy'); // change the current button text.
            this.triggerButton('hello'); // this triggers the other button named hello.
            this.buttons.heyThere.setDisabled(true); // disable the hello button.
        },
        heyThere: {
            text: 'Hey there!',
            btnClass: 'btn-blue',
            keys: ['enter', 'a'],
            action: function(scope, button){
                // button action
            }
        }
    }
});

$ngConfirm({
    buttons: {
        something: function(){
            // here the key 'something' will be used as the text.
            $ngConfirm('You clicked on something.');
        },
        somethingElse: {
            text: 'Something else &*', // Some Non-Alphanumeric characters
            action: function(){
                $ngConfirm('You clicked on something else');
            }
        }
    }
})

Simply applying classes to buttons.

ngConfirm comes bundled with btn-blue btn-green btn-red btn-orange btn-purple btn-default btn-dark

Other bootstrap options are btn-primary btn-inverse btn-warning btn-info btn-danger btn-success

$ngConfirm({
    buttons: {
        default: {
            btnClass: 'btn-default',
            ...
        },
        blue: {
            btnClass: 'btn-blue',
            ...
        },
        green: {
            btnClass: 'btn-green',
            ...
        },
    }
});

Listen to keyup events for individual buttons. A button can listen for multiple keys at a time.

$ngConfirm({
    buttons: {
        specialKey: {
            text: 'On behalf of shift',
            keys: ['shift', 'alt'],
            action: function(){
                $ngConfirm('Shift or Alt was pressed');
            }
        },
        alphabet: {
            text: 'A, B',
            keys: ['a', 'b'],
            action: function(){
                $ngConfirm('A or B was pressed');
            }
        }
    }
});

In this example, the YES button is hidden using bootstrap's hide class, thus the user can only use keys to proceed.

$ngConfirm({
    title: false,
    content: 'A very very critical action here! <br> ' +
             'the proceed button is hidden.' +
             'The only way to proceed is to press the <strong>Y</strong> key.<br>' +
             'Press <span style="font-size: 20px;">Y</span> to proceed.',
    buttons: {
        yes: {
            show: false, // hides the button using display: none
            keys: ['y'],
            action: function (scope, button) {
                $ngConfirm('Critical action <strong>was performed</strong>.');
            }
        },
        no: {
            keys: ['N'],
            action: function (scope, button) {
                $ngConfirm('You clicked No.');
            }
        },
    }
});

Button properties provide a nice and clean way to alter your buttons in run-time.

$ngConfirm({
    buttons: {
        buttonA: {
            text: 'button a',
            action: function (scope, button) {
                button.setText('Oh yeah'); // the current button
                this.buttons.buttonB.setText('Changed it!');
                return false;
            }
        },
        buttonB: {
            text: 'button b',
            action: function (scope, button) {
                this.buttons.buttonA.setDisabled(true);
                return false;
            }
        },
        reset: function (scope, button) {
            this.buttons.buttonA.setDisabled(false);
            this.buttons.buttonA.setText('button a');
            this.buttons.buttonB.setText('button b');
            return false;
        }
    },
});

A full list of functions for buttons.

Dialog types helps give the user a hint as to what the dialog is about

$ngConfirm({
    title: 'Encountered an error!',
    content: 'Something went downhill, this may be serious',
    type: 'red',
    typeAnimated: true,
    buttons: {
        tryAgain: {
            text: 'Try again',
            btnClass: 'btn-red',
            action: function(){
            }
        },
        close: function () {
        }
    }
});

Give meaning to your dialog with custom icons.
Read about Font Awesome here .

$ngConfirm({
    icon: 'glyphicon glyphicon-heart',
    title: 'glyphicon'
});
$ngConfirm({
    icon: 'fa fa-warning',
    title: 'font-awesome'
});
$ngConfirm({
    icon: 'fa fa-spinner fa-spin',
    title: 'Working!',
    content: 'Sit back, we are processing your request!'
});

ngConfirm confirm uses × html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)

$ngConfirm({
    closeIcon: true
});

$ngConfirm({
    closeIcon: true,
    closeIconClass: 'fa fa-close'
});

Handle closeIcon's callback

Control what happens when close icon is clicked.
closeIcon can take in function to handle the button click or you can return a button name.

$ngConfirm({
    closeIcon: function(){
        return false; // to prevent close the modal.
        // or
        return 'aRandomButton'; // set a button handler, 'aRandomButton' prevents close.
    },
    // or
    closeIcon: 'aRandomButton', // set a button handler
    buttons: {
        aRandomButton: function(){
            $.alert('A random button is called, and i prevent closing the modal');
            return false; // you shall not pass
        },
        close: function(){
        }
    }
});

ngConfirm uses bootstrap's grid system for its layout by default. You can simply provide column classes to adjust the modal's width.

You can also set responsive layouts. Bootstrap grid docs

instead of typing the whole thing, provide keywords like
xlarge/xl equivalent to col-md-12
large/l equivalent to col-md-8 col-md-offset-2
medium/m equivalent to col-md-6 col-md-offset-3
small/s equivalent to col-md-4 col-md-offset-4
xsmall/xs equivalent to col-md-2 col-md-offset-5

$ngConfirm({
    columnClass: 'small'
});
$ngConfirm({
    columnClass: 'col-md-4'
});
$ngConfirm({
    columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8'
});
$ngConfirm({
    columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8',
    containerFluid: true, // this will add 'container-fluid' instead of 'container'
});

Many have a different taste, who wont be using bootstrap in their projects.
You can simply provide the width of the modal, in px or any metric you want.

$ngConfirm({
    boxWidth: '30%',
    useBootstrap: false,
});
$ngConfirm({
    boxWidth: '500px',
    useBootstrap: false,
});

Namespacing is basically isolating the bootstrap classes names, like turning '.row' to '.custom-row'
If you're using a namespaced bootstrap library, this option is for you.

it is ideal to set this in defaults

$ngConfirm({
    bootstrapClasses: {
        container: 'container',
        containerFluid: 'container-fluid',
        row: 'row',
    },
});

$ngConfirm({
    title: 'Delete user?',
    content: 'This dialog will automatically trigger \'cancel\' in 6 seconds if you don\'t respond.',
    autoClose: 'cancel|8000',
    buttons: {
        deleteUser: {
            text: 'delete user',
            btnClass: 'btn-red',
            action: function () {
               $ngConfirm('Deleted the user!');
            }
        },
        cancel: function () {
           $ngConfirm('action is canceled');
        }
    }
});
$ngConfirm({
   title: 'Logout?',
    content: 'Your time is out, you will be automatically logged out in 10 seconds.',
    autoClose: 'logoutUser|10000',
    buttons: {
        logoutUser: {
            text: 'logout myself',
            btnClass: 'btn-green',
            action: function () {
               $ngConfirm('The user was logged out');
            }
        },
        cancel: function () {
           $ngConfirm('canceled');
        }
    }
});

Control what happens if the user clicks outside the modal.

$ngConfirm({
    backgroundDismiss: true, // this will just close the modal
});
$ngConfirm({
    backgroundDismiss: function(){
        return false; // modal wont close.
    },
});
$ngConfirm({
    backgroundDismiss: function(){
        return 'buttonName'; // the button will handle it
    },
});
$ngConfirm({
    backgroundDismiss: 'buttonName',
    content: 'Click outside the box to close the modal',
    buttons: {
        buttonName: function () {
            $ngConfirm('Button name was clicked');
        },
        close: function () {
        }
    }
});

Fancy animations to grab users attention. Click outside the modal to see the animation.

$ngConfirm({
    backgroundDismiss: false,
    backgroundDismissAnimation: 'shake',
});
$ngConfirm({
    backgroundDismiss: false,
    backgroundDismissAnimation: 'glow',
});

$ngConfirm({
    content: 'background dismiss is not allowed on this modal, thus the modal will make a backgroundDismissAnimation',
    escapeKey: true,
    backgroundDismiss: false,
});
$ngConfirm({
    escapeKey: 'buttonName',
    buttons: {
        buttonName: function(){
            $.alert('Button name was called');
        },
        close: function(){

        }
    }
});

If you need to show the confirm box in rtl then you should set the rtl option to true.

$ngConfirm({
    title: 'پیغام',
    content: 'این یک متن به زبان شیرین فارسی است',
    rtl: true,
    closeIcon: true,
    buttons: {
        confirm: {
            text: 'تایید',
            btnClass: 'btn-blue',
            action: function () {
                $ngConfirm('تایید شد.');
            }
        },
        cancel: {
            text: 'انصراف',
            action: function () {

            }
        }
    }
});

Get more control over the modal, mainly important for binding events for the modal elements.

$ngConfirm({
    title: false,
    contentUrl: 'callback.html',
    onScopeReady: function(scope){
        // when the scope is ready/created
        alert('Scope is ready');
        var self = this;
        this.buttons.ok.disabled = true;
        scope.fnClick = function () {
            scope.name = 'Chuck norris';
            self.buttons.ok.disabled = false;
        };
    },
    onReady: function (scope) {
        // when content is fetched & the modal is open
        alert('onReady');
    },
    onOpenBefore: function (scope) {
        // before the modal is displayed.
        alert('onOpenBefore');
    },
    onOpen: function () {
        // after the modal is displayed.
        alert('onOpen');
    },
    onClose: function () {
        // before the modal is hidden.
        alert('onClose');
    },
    onDestroy: function () {
        // when the modal is removed from DOM
        alert('onDestroy');
    },
    onAction: function (scope, btnName) {
        // when a button is clicked, with the button name
        alert('onAction: ' + btnName);
    },
    buttons: {
        ok: function () {

        }
    }
});

You can setup global settings for your ngConfirm.

angular.module('myApp', ['cp.ngConfirm'])
    .run([
        '$ngConfirmDefaults',
        function($ngConfirmDefaults){
            $ngConfirmDefaults.useBootstrap = false; // this is globally set.
        }
    ]);

Options, their defaults, possibilities and explanations.