Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    
</head>
<body>
  
  <div ng-controller="GrandParentController">
    GrandParent : 
    <span ng-bind="grandNameContainer" 
    class="red"></span>
    <div ng-controller="ParentController">
        <input ng-model="studentName" 
               placeholder="Enter Name">
        <button ng-click="emitMyName(studentName)">
          Emit
        </button>
       <button ng-click="broadcastMyName(studentName)">
          Broadcast
        </button>
​
         <div ng-controller="ChildController">
             Child :
           <span ng-bind="childNameContainer" class="green">
           </span>
         </div>
    </div>
  </div>
</body>
</html>
 
var myApp = angular.module('myApp', []);
​
myApp.controller("ParentController",
  function($scope){
  
    $scope.emitMyName = function(studentName){
      $scope.$emit("namePublished",{"studentName":studentName});
    };
  $scope.broadcastMyName = function(studentName){
      $scope.$broadcast("namePublished",{"studentName":studentName});
    };
  
});
​
myApp.controller("ChildController",
  function($scope){
  
   $scope.$on('namePublished', function(event, args) {
      console.log(args);
      $scope.childNameContainer = args.studentName; 
     }); 
  
});
​
myApp.controller("GrandParentController",
  function($scope){
  
   $scope.$on('namePublished', function(event, args) {
      console.log(args);
      $scope.grandNameContainer = args.studentName; 
     }); 
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
saan1984pro
0viewers