JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="ctrl">
        <button id="dash" data-draggable ng-click="handleDrop('hello from ui')">Handle Drop</button>
    </div>
</div>

JavaScript

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

app.directive('draggable', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            scope.addWidgetInternal = function(message) {
                console.log('directive heard: ' + message);
            }
        }
    }
}]);

app.controller('ctrl', ['$scope', function($scope) {
    
    $scope.handleDrop = function(message) {
        angular
        .element(document.getElementById('dash'))
        .scope()
        .addWidgetInternal(message);
    }
}]);