AngularJS - delay between update a value in the scope and actual render

Question

I have an annoying problem and I cannot solve it. The problem is that I have a delay (1-3 seconds) between updating any value in the scope and actual display of the value in the view (HTML).

Controller:

$scope.myVar = 'something';

HTML:

<span>{{myVar}}</span>

Once $scope.myVar was updated I expect the HTML to be updated immediately but it takes a few seconds. Can somebody please explain why?

Answer 1

Angular runs something called a $digest cycle. refer this link

This cycle is an internal execution loop that runs through your entire application’s bindings and checks if any values have changed. If values have changed, Angular will also update any values in the Model to return to a clear internal state. When we create data-bindings with AngularJS, we’re creating more $$watchers and $scope Objects, which in turn will take longer to process on each $digest. As we scale our applications, we need to be mindful of how many scopes and bindings we create, as these all add up quickly - each one being checked per $digest loop.