JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="MyApp">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <p><a ng-click="clickAngular()">Send From Angular</a></p>
            <p><a ng-click="clickLegacy()">Send From Legacy</a></p>
            <p>{{name}}</p>
        </div>
    </body>
</html>

JavaScript

var MyApp = angular.module('MyApp', [])

    .controller('MyCtrl', function($scope, MyService) {
        
        $scope.name = 'unknown';
        
        $scope.clickAngular = function() {
            MyService.setName("roger");
        };
        $scope.clickLegacy = function() {
            setNameFromLegacy("rodrigo");
        };
        
        $scope.$on('name_event', function(event, args) {
            console.log('receiving: ' + args);
            $scope.name = args;
        });

    })
    
    .factory('MyService', function($rootScope) {
        return {
            setName: function(name) {
                console.log('broadcasting: ' + name);
                $rootScope.$broadcast("name_event", name);
            }    
        }
    });
        


function setNameFromLegacy(name) {
    var injector = angular.injector(['ng', 'MyApp']);
    injector.invoke(['MyService', function(MyService){
        MyService.setName(name);
    }]); 
}