Внесение изменений в значение AngularJS вручную не вызывает изменения в модели

Когда я изменяю значение элемента ввода из простого JavaScript, модель angular не обновляется. Можно ли каким-либо образом инициировать это обновление, активировав какое-то событие вручную после изменения?

<body ng-controller="MainCtrl">
  <script>
    function changeValue() {
      var e = document.getElementById("field");
      e.value = "updated value";
    }
  </script>

  field: <input type="text" id="field" ng-model="field">{{field}}
  <br>
  <button onclick="changeValue()">Change the value</button>

</body>

Полный пример можно найти на plunkr. После нажатия кнопки я ожидаю, что {{field}} будет обновлен каким-то образом. Есть ли способ сделать это?

Ответ 1

Вы не должны этого делать (если только для тестирования, но даже тогда, пожалуйста, рассмотрите транспортир), Это плохая идея для взаимодействия с angular таким образом. Но если вы ДОЛЖНЫ, вот как вы это делаете.

function changeValue() {
  var e = document.getElementById("field");
  e.value = "updated value";
  var $e = angular.element(e);
  $e.triggerHandler('input');
}

PLNKR

Другой средний путь был бы

function changeValue() {
  var e = document.getElementById("field");
  var scope = angular.element(e).scope();
  scope.field = "updated value";
  scope.$digest();
}

PLNKR

Правильный способ - использовать контроллер angular

  $scope.changeValue = function(){
    $scope.field = "updated value";
  };

PLNKR