title: AngularJS models, multiple $scopes, and two-way data binding
body: <p>I like that AngularJS doesn't require and special syntax for Models, but there's one scenario I can't seem to wrap my head around. Take the following</p>
  
  <p>My dataService wraps whatever flavor of data storage I'm using:</p>
  
  <pre><code>app.factory('dataService', function() {
      var data = 'Foo Bar';
  
      return {
          getData: function() {
              return data;
          }
      };
  });
  </code></pre>
  
  <p>I have two controllers that both access the same piece of data:</p>
  
  <pre><code>app.controller('display', function($scope, dataService) {
      $scope.data = dataService.getData();
  });
  
  app.controller('editor', function($scope, dataService) {
      $scope.data = dataService.getData();
  });
  </code></pre>
  
  <p>If I then have two views, one of which modifies the data, why doesn't the other update automatically? </p>
  
  <pre><code>&lt;div ng-controller="display"&gt;
  &lt;p&gt;{{data}}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="editor"&gt;
  &lt;input type="text" value="{{data}}"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I understand how this is working in something like Knockout where I'd be forced to make the data a knockout observable object. So any modifications in one part of the application trigger subscriptions and update views in another. But I'm not sure how to go about it in Angular. </p>
  
  <p>Any advice?</p>