Po godzinach frustrujących wyszukiwań czuję, że muszę tutaj przesłać moje pytanie. Z góry przepraszam, jeśli to pytanie zostanie jakoś wcześniej udzielone, ale żadne z moich poszukiwań nie pomogło do tej pory. Oto moje pytanie:

Mój kod JavaScript tworzy obiekt, który jest modyfikowany i monitorowany przez AngularJS. Na niektórych zdarzeniach (takich jak ładowanie poprzedniego ustawienia obiektu) chcę zmienić właściwości tego obiektu spoza zakresu. Problem polega na tym, że wejścia nie zmieniają się ...

Oto przykład, w jaki sposób chcę wykonać te zmiany:

Kod HTML:

<div ng-app="myApp" ng-controller="FirstCtrl">
<input type="number" ng-model="data.age">
<h1>{{data.age}}</h1>

<input type="button" value="Change to 20" ng-model="data" onclick="change()">

Kod JavaScript:

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;
}

Po naciśnięciu przycisku „Zmień na 20” nic się nie dzieje. Jak mogę zmienić wiek danej osoby na podstawiechange funkcjonować?