JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="TestApp">
    <div ng-controller="TestCtrl">        
        <input custom-input let-me-click="onClickEvent($data)" />
        <br /><br /> 
        Clicked: {{ Times }}<br />
        Passed Data: {{ PassedData }}
    </div>
</div>

JavaScript

var app = angular.module('TestApp', []);

app.controller('TestCtrl', ['$scope', function($scope){
    $scope.Times = 0;
    $scope.PassedData = '';
    
    $scope.onClickEvent = function(e)
    {
         $scope.Times++;
        $scope.PassedData = e;
    }
}]);

app.directive("customInput", function ($timeout, $compile) {
    return {
        restrict: "A",
        scope: {
            onClickNotify: "&letMeClick",
        },
        replace: true,
        transclude: true,      
        template: '<button ng-click="ClickMe()">Test</button>',
        controller: function($scope)
        {
            $scope.ClickMe = function()
            {
                $scope.onClickNotify({ $data : 'aw'});
            }
        }
    }
});