Emit and broadcast

by Venkata Sai Vamsi Penupothu

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><br>
        <div ng-contoller = "firstChild">
             city is {{city}}
        </div>
    </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.$on('addrBoom',function(events,data){
            $scope.address = data;
    });
    
}


//sub controller one

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


//sub controller two

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

}]);