JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="ctrl">
  <button ng-click="onClick(params.param1)" type="button" popup>
    click with popup
  </button>
    <button ng-click="onClick(params.param2)" type="button">
    click without popup
  </button>
  {{ value }}
</div>

JavaScript

var app = angular.module("myApp", []);

app.config(function($provide){
  $provide.decorator('ngClickDirective', ['$delegate', function($delegate) {
      //$delegate is array of all ng-click directive
      //in this case frist one is angular buildin ng-click
      //so we remove it.
      $delegate.shift();
      return $delegate;
  }]);
});

app.directive('ngClick', function($rootScope) {
  return {
    restrict: 'A',
    priority: 100,
    link: function($scope, element, attr) {
      element.bind('click', function($event) {
      	// emit event to manage modal if 'popup' attr is exist
        if (attr.hasOwnProperty('popup')) {
        	// and pass arguments
        	$scope.$emit('popup-click', { $scope, element, attr }); 
        } else {
        	// else just execute default 'ng-click' handler
          $scope.$apply(attr.ngClick)
        }
      })
    }
  }
})

app.factory('popupService', function($rootScope) {
    $rootScope.$on('popup-click', function(e, args) {
    		// click with popup attr observer
        // there needs to be your code to manage modal
        if (confirm('I want to be your modal!')) {
        	args.$scope.$apply(args.attr.ngClick)
        } else {
        	// nothing to do
        }
    });
    return {};
});

app.controller('ctrl', ['$rootScope', '$scope', 'popupService', function($rootScope, $scope, popupService) {
	// define params to pass for example
	$scope.params = {
  	param1: 'Clicked with popup',
    param2: 'Clicked without popup'
  }
  
  $scope.value = ''

	// ng-click default scope handler
	$scope.onClick = function(value) {
  	console.log('scope event', value)
    $scope.value = value;
  }
}])