title: Share data between AngularJS controllers
body: <p>I'm trying to share data across controllers. Use-case is a multi-step form, data entered in one input is later used in multiple display locations outside the original controller. Code below and in <a href="http://jsfiddle.net/AVhRf/">jsfiddle here</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="FirstCtrl"&gt;
      &lt;input type="text" ng-model="FirstName"&gt;&lt;!-- Input entered here --&gt;
      &lt;br&gt;Input is : &lt;strong&gt;{{FirstName}}&lt;/strong&gt;&lt;!-- Successfully updates here --&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;div ng-controller="SecondCtrl"&gt;
      Input should also be here: {{FirstName}}&lt;!-- How do I automatically updated it here? --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// declare the app with no dependencies
  var myApp = angular.module('myApp', []);
  
  // make a factory to share data between controllers
  myApp.factory('Data', function(){
      // I know this doesn't work, but what will?
      var FirstName = '';
      return FirstName;
  });
  
  // Step 1 Controller
  myApp.controller('FirstCtrl', function( $scope, Data ){
  
  });
  
  // Step 2 Controller
  myApp.controller('SecondCtrl', function( $scope, Data ){
      $scope.FirstName = Data.FirstName;
  });
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>