title: AngularJS : How to create a two-way data binding between two isolated controllers and a shared service?
body: <p>I am trying to create a two-way data binding between two isolated controllers and a shared service (which provides another isolated scope):</p>
  
  <pre><code>app.factory("sharedScope", function($rootScope) {
      var scope = $rootScope.$new(true);
      scope.data = "init text from factory";
      return scope;
  });
  
  app.controller("first", function($scope, sharedScope) {
      $scope.data1 = sharedScope.data;
  });
  
  app.controller("second", function($scope, sharedScope) {
      $scope.data2 = sharedScope.data;
  });
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/akashivskyy/MLuJA/">http://jsfiddle.net/akashivskyy/MLuJA/</a></p>
  
  <p>When the application launches, <code>data1</code> and <code>data2</code> are correctly updated to the <code>init text from factory</code>, but later, if I change any of them, those changes are not reflected throughout those three scopes.</p>
  
  <p>How can I bind them?</p>
  
  <p>P.S. If there's a better way than returning a scope and still having access to event and observing functionalities (without basically re-writing them), let me know. :)</p>