JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">

    <div ng-controller="MyCtrl as myCtrl">
    
        <input type="text" ng-model="myCtrl.textToBroadcast" placeholder="Type text to broadcast">
        
        <button ng-click="myCtrl.broadcastEvent()">Click me to broadcast to the directive</button>
        
        <my-dir></my-dir>
        
    </div>
    
</div>

CSS

.mgn-top {
    margin-top:12px;
}

JavaScript

angular.module("MyApp", []).controller("MyCtrl", function ($rootScope) {
    
    this.broadcastEvent = function () {
    		var data = { a: "1", b: "2" }; 
        $rootScope.$broadcast("toggleAnimation", this.textToBroadcast);
    }
    
    
}).directive("myDir", function () {
    
    return {
        restrict : "E",
        template : "<div class='mgn-top'>The directive heard:  {{broadcastedText}}</div>",
        link : function (scope) {
            scope.$on("toggleAnimation", function (event, args) {
                scope.broadcastedText = args;
            });
        }
    };
    
});