JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Controller 1:</h1>
<div ng-controller="ctrl1">
    <div data-my-directive="" data-save-function="saveAbc">
    </div>
</div>
<h1>Controller 2:</h1>
<div ng-controller="ctrl2">
    <div data-my-directive="" data-save-function="saveXyz">
    </div>
</div>

JavaScript

angular.module("myApp",[])
.controller("ctrl1",function($scope){
    $scope.changeAbc = function(){
        alert("function: changeAbc in Controller1 is being invoked");
    }
    $scope.saveAbc = function(){
        alert("function: saveAbc in Controller1 is being invoked");
    }
})
.controller("ctrl2",function($scope){
    $scope.changeXyz = function(){
        alert("function: changeXyz in Controller2 is being invoked");
    }
    $scope.saveXyz = function(){
        alert("function: saveXyz in Controller2 is being invoked");
    }
}).
directive("myDirective",function(){
    return {
            restrict: 'A', 
            template: '<input type="button" value="save" data-ng-click="saveFunction()"/>',
            replace: true,
            scope:{
                changeFunction:"=",
                saveFunction:"="
            }
        };
});