JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" ng-app="app" ng-controller="Main as view">
  <button data-confirm-popup-text="Do you want to reject"  
    ng-click="view.onConfirm(result, $event)"
    confirm-button>
  </button>
  <span ng-bind="view.result"></span>
</div>

JavaScript

angular.module("app", [])
  .controller('Main', MainController)
  .directive('confirmButton', confirmButton);

confirmButton.$inject = ['$window', '$parse'];
function confirmButton($window, $parse) {
	return {  	
    priority: 1,
    compile: function(elem, attr) {
      var text = attr.confirmPopupText;
      var callback = $parse(attr.ngClick);
      elem.html('<span>Any HTML</span>Reject');
      elem.addClass('btn btn-danger btn-xs');  
    	return function(scope, elem, attr) {
      
        elem.unbind('click').bind('click', function(event) {
          var result = $window.confirm(text);  // use $modal here instead        
          callback(scope, {result: result, $event : event});
          scope.$apply(scope.ngClick);
        });
      }
    }
  }

}

function MainController() {
	var vm = this;
	vm.onConfirm = function(result, $event) {
  	vm.result = result;
  }
  

}