title: AngularJS broadcast from $rootScope to modal window scope
body: <p>Is there any way to broadcast from $rootScope to modal window $scope?</p>
  
  <p>My $rootScope is ApplicationController and I'm listening in there to socket.io event. When I handle this event I want to $broadcast to ChatController (modal window) $scope (which might be already opened so resolve won't help me here).</p>
  
  <p>A quick example to demonstrate this issue:</p>
  
  <p>index.html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html ng-app="App"&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /&gt;
      &lt;script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="ApplicationController"&gt;
      &lt;h1&gt;Hello Plunker!&lt;/h1&gt;
      &lt;input type="button" value="open modal" ng-click="openModal()"&gt;
      &lt;div ng-controller="NotModalController"&gt;
        {{fields.field1}}
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js:</p>
  
  <pre><code>(function() {
    var app = angular.module("App", ["ui.bootstrap"]);
  
    app.controller("ApplicationController", function($scope, $modal) {
      $scope.openModal = function() {
        var modalInstance = $modal.open({
          templateUrl: 'chat.html',
          controller: 'ModalController',
          size: 'lg',
          resolve: {
  
          }
        });
  
        modalInstance.result.then(function() {
          console.log('modal closed');
        }, function() {
          console.log('modal dismissed');
        });
  
        setTimeout(function() {
          console.log('broadcasting event');
          $scope.$broadcast('someEvent', 'broadcasted value');
        }, 3000);
      };
    });
  
    app.controller("NotModalController", function($scope) {
      $scope.fields = {
        field1: 'initial'
      };
      $scope.$on('someEvent', function(event, args) {
        $scope.fields.field1 = args;
      });
    });
  
    app.controller("ModalController", function($scope) {
      $scope.fields = {
        field1: 'initial'
      };
      $scope.$on('someEvent', function(event, args) {
        $scope.fields.field1 = args;
      });
    });
  
  })();
  </code></pre>
  
  <p>modalTemplate.html</p>
  
  <pre><code>&lt;div&gt;
    {{fields.field1}}
  &lt;/div&gt;
  </code></pre>
  
  <p>the plunkr url : <a href="http://plnkr.co/edit/9xpwmleZJnAG66cGWcYO" rel="nofollow">http://plnkr.co/edit/9xpwmleZJnAG66cGWcYO</a></p>