angular.js - angular1.x,dom操作与ng数据操作的冲突问题

Question

http://codepen.io/anon/pen/JXogBj?editors=1010

如上面的代码所示，
点击1:dom操作再点击2:ng操作，标签的值没改，除非点击3:ng操作再点击2:ng操作。
有什么方法可以让2:ng操作总是生效？

Answer 1

Let me explain the reason first

• 1: DOM operation directly changes the View value, but $scope.name is still 123 and has not changed. This is very important

• 2: ng operation, because $scope.name is still 123, and it is assigned a value of 123 at this time, it actually does nothing

• 3: ng operation, $scope.name is assigned a value of 124. At this time, the name changes, and angular goes back to update the value of the view. Because the value is the same, the effect cannot be seen. Then click the 2:ng operation, and $scope.name is assigned a value of 123. If it is changed, the value of the view will be updated synchronously.

A bit convoluted

Supplement

var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "123";  
  
  $('#domopr').click(function(){
    $scope.$apply(function(){
       $scope.name = "124";
    });
  });
});