JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<div ng-app="fApp">
		    <div ng-controller="MyCtrl">
		      Hello, {{name}}!
		      <button ng-click='notify()'>Notify name</button>
		    </div>
		    
		</div> 

		<div id='container'>
		    <div ng-controller="MyCtrl">
		      Hello, {{name}}!
		    </div>
		</div>

JavaScript

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

			//myApp.directive('myDirective', function() {});
			//myApp.factory('myService', function() {});
			myApp.controller('MyCtrl', function($scope, $rootScope){
			    $scope.name = 'Chrome';
			    
			    $scope.notify = function(){
			        //alert('notify clicked');
			        angular.element("body").trigger('notify:event', $scope.name); 
			    }

			   
			    /*$rootScope.$on('notify:event', function(e,data){
			        alert('name received is :' + data.name);
			    });*/
			});

			var secApp = angular.module('sApp',[]);
			secApp.controller('MyCtrl', function($scope, $rootScope){
			    $scope.name = 'Mozilla';
			    
			    angular.element("body").on('notify:event', function(e,data){
			        alert('name received is :' + data);
			    });
			});

			var appDiv = document.getElementById("container");

			angular.bootstrap(angular.element(appDiv), ['sApp']);