A Simple Directive for Bootstrap confirmation modals using ui-bootstrap

confirmation-directive.html

<div class="modal-header">
  <div class="modal-title">
    <h3>{{confirmTitle}}</h3>
  </div>
</div>
<div class="modal-body">
  {{confirmMessage}}
</div>
<div class="modal-footer">
  <button class="btn btn-default" ng-click="cancel()"> {{cancelText}} </button>
  <button class="btn {{acceptBtnClass}}" ng-click="accept()"> {{acceptText}} </button>
</div>

confirmation-directive.js

angular.module('cloudweb.confirmationDirective', ['ui.bootstrap.modal'])
  .controller('confirmationInstanceCtrl',
    [       '$scope', '$modalInstance',
    function($scope,   $modalInstance){
      $scope.cancel = function(){
        $modalInstance.dismiss('cancel');
      }
      $scope.accept = function(){
        $modalInstance.close()
      }
  }])

  .controller('confirmationModalCtrl',
    [       '$scope',  '$modal',
    function($scope,    $modal ){

      var modalOptions = {
        templateUrl: 'components/confirmation-directive/confirmation-directive.html',
        controller: 'confirmationInstanceCtrl',
        scope: $scope,
        size: 'md'
      }

      $scope.openModal = function(){
        var modalInstance = $modal.open(modalOptions);
        modalInstance
        .result
        .then(function(){
          $scope.confirmAction()
        });
      }
  }])

  .directive("csfConfirmation", [function(){
    return {
      restrict: "A",
      scope: {
        confirmAction  : '&',
      },
      controller: 'confirmationModalCtrl',
      link: function(scope, elem, attr, ctrl){
        scope.confirmTitle   = attr.confirmTitle   || 'Are you sure?';
        scope.confirmMessage = attr.confirmMessage || 'Are you sure?';
        scope.acceptText     = attr.acceptText     || 'Accept';
        scope.acceptBtnClass = attr.acceptBtnClass || 'btn-danger';
        scope.cancelText     = attr.cancelText     || 'Cancel';
        scope.cancelBtnClass = attr.cancelBtnClass || 'btn-default';

        elem.bind('click', function(){
          scope.openModal()
        })
      }
    }
  }]);