title: How to change AngularJS data outside the scope?
body: <p>After hours of frustrating searches I feel I need to submit my question here. I apologize in advance if this question is somehow answered before but none of my searches has helped so far. So here's my question:</p>
  
  <p>My JavaScript code is creating an object, which is modified and monitored by AngularJS. On some events (like loading a previous setting of the object), I wish to change the properties of this object from outside the scope. The problem is that the inputs does not change...</p>
  
  <p>Here's an example of how I wish to perform these changes:</p>
  
  <hr>
  
  <p>HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="myApp" ng-controller="FirstCtrl"&gt;
  &lt;input type="number" ng-model="data.age"&gt;
  &lt;h1&gt;{{data.age}}&lt;/h1&gt;
  
  &lt;input type="button" value="Change to 20" ng-model="data" onclick="change()"&gt;
  </code></pre>
  
  <hr>
  
  <p>JavaScript Code:</p>
  
  <pre class="lang-js prettyprint-override"><code>var person = {
      age: 16
  };
  
  // Create module
  var myApp = angular.module('myApp', []);
  myApp.factory('Data', function() {
      return person;
  });
  
  function FirstCtrl($scope, Data) {
      $scope.data = Data;
  }
  
  function change() {
      person.age = 20;
  }
  </code></pre>
  
  <hr>
  
  <p>When I now press the "Change to 20" button, nothing happens. How can I modify the person's age from the <code>change</code> function?</p>