JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <div watch-foo ng-controller="FooController">
    <button ng-click="changeFoo()">
      Change
    </button>
  </div>
</div>

JavaScript

angular.module('myApp', [])
  .directive('watchFoo', watchFooDirective)
  .controller('FooController', FooController);

function watchFooDirective($rootScope) {
	return function postLink(scope) {
  	scope.$watch(function () {
    	return scope.foo;
    }, function (value) {
    	console.log('scope.$watch A');
    });
  	scope.$on('foo', function (value) {
    	console.log('scope.$on A');
    });
    $rootScope.$on('foo', function (value) {
    	console.log('$rootScope.$on A');
    });
    $rootScope.$on('foo', function (value) {
    	console.log('$rootScope.$on B');
    });
  	scope.$on('foo', function (value) {
    	console.log('scope.$on B');
    });
  	scope.$watch(function () {
    	return scope.foo;
    }, function (value) {
    	console.log('scope.$watch B');
    });
  };
}

function FooController($scope) {
	$scope.foo = 'foo';
  $scope.changeFoo = function() {
  	$scope.foo = 'bar';
    $scope.$emit('foo');
  };
}