После нескольких часов разочаровывающих поисков я чувствую, что мне нужно представить свой вопрос здесь. Я заранее прошу прощения, если на этот вопрос как-то ответили раньше, но ни один из моих поисков не помог до сих пор. Итак, вот мой вопрос:

Мой код JavaScript создает объект, который изменяется и отслеживается AngularJS. В некоторых случаях (например, при загрузке предыдущей настройки объекта) я хочу изменить свойства этого объекта вне области видимости. Проблема в том, что входы не меняются ...

Вот пример того, как я хочу выполнить эти изменения:

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()">

Код 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;
}

Когда я сейчас нажимаю кнопку «Изменить на 20», ничего не происходит. Как я могу изменить возраст человека отchange функционировать?