angular.js - Using angularjs, how to modify the model in document ready and make the DOM bound to the model updated?

Question

In the example below, the model has been modified, but the interface has not been updated
Example:
http://jsbin.com/relanafohu/4/edit

Answer 1

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

Answer 2

All model modifications in asynchronous operation callbacks that are not known to Angular need to use the apply method to explicitly notify angular to update the view. For details, see Angular's documentation on apply.

In addition, if angular is in the process of updating (digest circle) and apply is called, the following error will appear:

Error: $apply already in progress

In order to avoid this error, you can first determine the current status and directly use the following encapsulated method:

jssafeApply = function( scope, fn) {
    var phase = scope.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn && (typeof(fn) === 'function')) { fn();
        }
    } else {
        scope.$apply(fn);
    }
}

When you need to set the model, just:

jssafeApply( $scope, function(){
    // 在这里写你修改model的代码
});

For more details about this error, check out this question on stackoverflow