title: AngularJS: How can I pass variables between controllers?
body: <p>I have two Angular controllers:</p>
  
  <pre><code>function Ctrl1($scope) {
      $scope.prop1 = "First";
  }
  
  function Ctrl2($scope) {
      $scope.prop2 = "Second";
      $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
  }
  </code></pre>
  
  <p>I can't use <code>Ctrl1</code> inside <code>Ctrl2</code> because it is undefined. However if I try to pass it in like so…</p>
  
  <pre><code>function Ctrl2($scope, Ctrl1) {
      $scope.prop2 = "Second";
      $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
  }
  </code></pre>
  
  <p>I get an error. Does anyone know how to do this?</p>
  
  <p>Doing </p>
  
  <pre><code>Ctrl2.prototype = new Ctrl1();
  </code></pre>
  
  <p>Also fails.</p>
  
  <p><strong>NOTE:</strong> These controllers are not nested inside each other.</p>