Why $scope.value is only showing as prefilled textbox after we click on Text box and screen even using angular's ready function

Question

I am trying to set value of ng-model named lastName using $scope.lastName="ThisIsLastname" in ready function. I can set value, It can be set also as I can see that in console but the problem is value does not appeared on textbox itself (textbox is not prefilled). Textbox is only prefilled if I click on text box and then anywhere in screen.

<input type="text" ng-model="lastName" /> <!-- this textbox should be prefilled when screen load using ng-model only -->


angular.element(document).ready(function () {
    console.log("is ready now");
    $scope.lastName="ThisIsLastname"; //set value
    console.log($scope.lastName); // I can see that value has been set successfully.
});

so when I reload page, I can see that that value is printed on console once ready function called however I can see empty text box (value of last name is not showing on text box).

But When I first click on that empty text box, and then click anywhere on screen, value of text box appear. I could not understand what makes it appear now but does not appear when ready function called.

I do not need alternate solution, I want to get knowledge why this is happening!

Answer 1

In angularjs, angular.element is a jqLite object

---

Wrap the code with zeroed $timeout to triger digest cycle:

console.log("is ready now");

$timeout(function(){      
  $scope.lastName="ThisIsLastname";    
}); 

console.log($scope.lastName);