39091045

Defining angular controllers and component

HTML

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <caller-component></caller-component>
  <callee-component><</callee-component>
</div>

JavaScript

var app = angular.module("myApp", []);

app.component("callerComponent", {
	template: "<button ng-click='externalCall()'>Click Me!</button>",
  controller: function ($scope, $rootScope) {
  	$scope.externalCall = function () {
    	$rootScope.$emit("setText");
    }
  }
});

app.component("calleeComponent", {
	template: "<p>{{ myText }}</p>",
  controller: function ($scope, $rootScope) {
  	$rootScope.$on("setText", function () {
    	$scope.myText = "Hello from callerComponent!"
    });
  }
});