title: Using $scope functions from a different controller in AngularJS
body: <p>I'd like to share the $scope functions of one controller in another controller, in this case for an AngularUI dialog.</p>
  
  <p>Specifically in the example below, I'd like $scope.scopeVar to be available in PopupCtrl.</p>
  
  <p><a href="http://plnkr.co/edit/jlQtaAtBzN8FFuAuL9pV?p=preview" rel="noreferrer">Here is a Plunkr</a></p>
  
  <p><a href="https://github.com/angular-ui/bootstrap/issues/259" rel="noreferrer">Resolve code based on mlarcher's comment here</a></p>
  
  <p>main.js</p>
  
  <pre><code>angular.module('MyApp', ['ui.bootstrap']);
  
  var MainCtrl = ['$scope', '$dialog', '$rootScope', function($scope, $dialog, $rootScope) {
  
    $scope.myTestVar = "hello";
  
    $scope.myOpts = {
      backdrop: true,
      keyboard: true,
      backdropClick: true,
      resolve: { MainCtrl: function() { return MainCtrl; }},
      templateUrl: 'myPopup.html',
      controller: 'PopupCtrl'
    };
  
    $scope.scopeVar = 'scope var string that should appear in both index.html and myPopup.html.';
    $rootScope.rootScopeVar = "rootScope var string that should appear in both index.html and myPopup.html.";
  
    $scope.openDialog = function() {
  
      var d = $dialog.dialog($scope.myOpts);
  
      d.open().then(function() {
        $scope.scopeVar = 'scope var string should be changed after closing the popup the first time.';
        $rootScope.rootScopeVar = 'rootScope var string should be changed after closing the popup the first time.';
      });
    };
  }];
  
  
  
  var PopupCtrl = ['$scope', 'dialog', 'MainCtrl', function ($scope, dialog, MainCtrl) {
  
     var key;
  
     for (key in MainCtrl) {
       $scope[key] = MainCtrl[key];
     }
  
     $scope.close = function(){
       dialog.close();
     }
   }];
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MyApp"&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;h4&gt;{{scopeVar}}&lt;/h4&gt;
      &lt;h4&gt;{{rootScopeVar}}&lt;/h4&gt;
      &lt;br&gt;
      &lt;button class="btn btn-primary" type="button" data-ng-click="openDialog()" &gt;Popup&lt;/button&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>myPopup.html</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
     &lt;h4&gt;{{scopeVar}}&lt;/h4&gt;
     &lt;h4&gt;{{rootScopeVar}}&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
     &lt;button data-ng-click="close()" class="btn btn-large popupLarge" &gt;Close&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>