title: AngularJS : assign variable reference to Object property
body: <p>As you can see in the code snippet below, <code>$scope.foo</code> is assigned on the <code>foo</code> property of the <code>$scope.bar</code> Object. Those are only in sync at initialization.
  I would like to have a reference to <code>$scope.foo</code> in my <code>$scope.bar</code> Object to keep them synchronized.</p>
  
  <p>Note :<br>
  This question is in an AngularJS context.<br>
  This is a trivial problem, and should be solved in JS frameworks.</p>
  
  <p>Working solution in a Plunker : <a href="https://plnkr.co/edit/N6MW4kTQORbYY33HdvLH?p=preview" rel="nofollow">here</a></p>
  
  <p>Snippet with the problem :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', [])
  
  .controller('Ctrl', ['$scope', function($scope) {
   
      $scope.foo = "eeee";
      $scope.bar = {
          foo : $scope.foo
      };
      
      $scope.do = function() {
          alert($scope.foo);
      };
      
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;body ng-app="app"&gt;
    &lt;div ng-controller="Ctrl"&gt;
      
      foo : 
      &lt;input type="text" ng-model="foo"&gt; {{foo}} &lt;br /&gt;
      
      bar : 
      &lt;input type="text" ng-model="bar.foo"&gt; {{bar}} &lt;br /&gt;
      
      
      &lt;button type="button" ng-click="do()"&gt; DO &lt;/button&gt;
      
      
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>