JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div>
        <button id="chart_area" dashboard 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',
        require: 'dashboard',
        link: function (scope, elem, attrs, dashboardCtrl) {
            
            dashboardCtrl.controllerSpecificFunction('hello from child directive!');
           
            scope.addWidgetInternal = function(message) {

                console.log(message);
            }
        }
    }
}]);

app.directive('dashboard', [function () {
    return {
        restrict: 'A',
        controller: function ($scope) {
            $scope.handleDrop = function(message) {
                $scope.addWidgetInternal(message)
            }
            
            this.controllerSpecificFunction = function(message) {
                console.log(message);
            }
        }
    }
}]);