$Apply, $Digest

by Santosh Thakur

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<h1>$Apply, $ Digest</h1>
<div ng-app='MyApp'>
  {{rootMessage}}

  <div ng-controller='MyCtrl'>
    {{childMessage}}
  </div>
</div>

JavaScript

"Use strict";

angular.module("MyApp", []).controller("MyCtrl", function($rootScope, $scope) {
  $rootScope.rootMessage = "Initial Root Message";
  $scope.childMessage = "Initial Child Message";

 setTimeout(function() {
    console.log("Message  - Timeout");
    $rootScope.rootMessage = "New Root Message";
    $scope.childMessage = "New Child Message";
    $scope.$apply();
    $scope.$digest();
  }, 2000);


});