Calling a controller from another outside controller

by Afroza Yasmin

HTML

<h3>Calling a controller from another outside controller in AngularJs.</h3>

<div ng-app="myModule">
  <!--Parent div-->
  <div ng-controller="firstCtrl">
      <input type="text" ng-model="name" placeholder="Enter Name">
      <input type="number" ng-model="age" placeholder="Enter Age">
      <button ng-click="submit()">OK</button>
  </div>
  
  <div ng-controller="secondCtrl">
     <h3 ng-show="info"> My name is {{myName}},{{myAge}} years old. </h3>
  </div>
    
</div>

JavaScript

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

app.controller("firstCtrl", function($scope, $rootScope) {
  $scope.name;
  $scope.age;
  $scope.submit = function(){
  	$rootScope.$broadcast('myEvent', {
    		myName: $scope.name,
        myAge: $scope.age
    })
  }
});

app.controller("secondCtrl", function($scope) {
  $scope.myName;
  $scope.myAge;

  $scope.$on('myEvent', function(event, message){
  	$scope.info = true;
    $scope.myName = message.myName;
    $scope.myAge = message.myAge;
    
  })

});