Bootstrap-Confirmation jQuery plugin with AngularJS

Question

I am trying to use Bootstrap-Confirmation plugin with AngularJS, but I cannot seem to get the directive to work properly. I am using this YouTube video to get going.

A similar SO question uses another plugin called popConfirm, but it is used in similar way. I tried to replicate the directive, but that did not work either.

I want to show a confirmation dialog when the button is clicked, and IF 'Yes' is clicked, only then go through would ng-click function.

Here is a JSFiddle Demo of it working in JQuery.

And here is a Plnkr Demo of what I have so far.

Script Order:

1. JQuery.js
2. Angular.js
3. UI-Bootstrap.js
4. Bootstrap.css
5. Boostrap-Confirmation.js
6. app.js

Main HTML:

<button class="btn btn-xs btn-primary" pop-confirm ng-click="confirm()">Confirm</button>

App Directive:

app.directive('popConfirm', function(){
    var linker = function(scope, element, attr) {
        element.confirmation();
    };

    return {
        link: linker
    };
});

Answer 1

Look at this inbuilt jquery library Here https://nakupanda.github.io/bootstrap3-dialog/

function confirm() {
BootstrapDialog.show({
    title: 'Confirmation Required',
    message: 'Are you sure? You are about to delete this file.',
    size: "SIZE_SMALL",
    type: "type-danger",

    buttons: [{
        label: 'Yes',
        cssClass: 'btn-primary btn-sm',
        action: function(dialogItself){
           //your ajax codes here if you have or do any requests here
            dialogItself.close();
        }
    }, {
        label: 'No',
        cssClass: 'btn-default btn-sm',
        action: function(dialogItself){
            dialogItself.close();
        }
    }]
});
}