title: AngularJS: share the data of the same controller in two different, not nested parts of the page
body: <p>I want to share the data of one controller between two places in my page. For example:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="myController"&gt;
          &lt;input type="text" ng-model="x" /&gt; {{x}}
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- these are in totally different places and I do not want, nor can't nest them --&gt;
  &lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="myController"&gt;
          &lt;input type="text" ng-model="x" /&gt; {{x}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and of course, this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var myApp = angular.module('myApp', []);
  myApp.controller('myController', function($scope) {
      $scope.x = 'test';
  });
  </code></pre>
  
  <p>What can I do so that, no matter what I type first input text will be reflected in the second? And vice versa? Basically the same data being propagated to these two sections, while maintaining a single copy of the data.</p>
  
  <p>JSFiddle here: <a href="http://jsfiddle.net/LETAd/">http://jsfiddle.net/LETAd/</a></p>
  
  <p>PS: I bootstrap it manually, if this is of any relevance.</p>
  
  <p>Thanks!</p>