AngularJS (+Bootstrap) directive for inline ngClick confirmation

inlineConfirm.js

(function () {
         'use strict';
         angular.module('yourModule').directive('inlineConfirm',
         ['$compile',
        function ($compile) {
         return {
                 priority: -100,
                 link: function (scope, elm, attrs) {
                  var wrapperTemplate = '<div class="popover inline-confirm" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
                  var template =
                         '<div>'
                         + '<button type="button" class="btn btn-danger" ng-click="confirm()">Yes</button> '
                         + '<button type="button" class="btn btn-default" ng-click="cancel()">No, keep it</button>'
                         + '</div>';
                                 

                         elm.bind('click', function (e) {
                                  e.stopImmediatePropagation();
                                  e.preventDefault();
                                  var compiledTemplate = $compile(template)(scope);
                                  elm.popover({
                                           animation: false,
                                           template: wrapperTemplate,
                                           title: attrs.inlineConfirm || 'Are you sure?',
                                           //container: 'body',
                                           html: true,
                                           content: compiledTemplate
                                  });
                                  elm.popover('show');
                         });
                        
                         scope.confirm = function () {
                                  scope.$eval(attrs.ngClick);
                                  elm.popover('destroy');
                         };
                         scope.cancel = function () {
                                  elm.popover('destroy');
                         };
                         scope.$on('$destroy', function () {
                                  elm.popover('destroy');
                         });
                 }
        };
        }]);
})();
 

inlineConfirm_action.gif

usageExample.html

<a class="btn btn-danger" inline-confirm ng-click="removeTheThing();">Remove</a>