$emit angularJS

HTML

<body ng-app="App">
    


<div ng-controller="parentCtrl">
        
    {{city}} , {{address}}
    
    <div ng-controller="subCtrlOne">
       <input type="text" ng-model="city"/>
        <button ng-click="getCity(city)">City !!!</button>
        
    </div>
    
    <div ng-controller="subCtrlTwo">
        
        <input type="text" ng-model="address"/>
        <button ng-click="getAddrress(address)">Address !!!</button>
        
    </div>
    
    
    
    
    
</div>
    
</body>

JavaScript

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

//parent controller
App.controller('parentCtrl',parentCtrl);

parentCtrl.$inject = ["$scope"];

function parentCtrl($scope) {
    
    $scope.$on('cityBoom',function(events,data){
            $scope.city = data;
    });
    
    $scope.$emit('addrBoom',function(events,data){
            $scope.address = data;
    });
    
}


//sub controller one

App.controller('subCtrlOne',subCtrlOne);

subCtrlOne.$inject =['$scope'];

function subCtrlOne($scope) {
    
    $scope.getCity=function(city){
       
      $scope.$emit('cityBoom',city);
        
    }
}


//sub controller two

App.controller('subCtrlTwo',subCtrlTwo);

subCtrlTwo.$inject = ["$scope"];

function subCtrlTwo($scope) {
            
    $scope.getAddrress = function(addr) {
        
        $scope.$emit('addrBoom',addr);
    
    }

}