var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJs $apply method</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function($scope) {
//set default datetime.
$scope.currentDateTime = new Date();
//update datetime.
$scope.getUpdatedDateTime = function() {
$scope.currentDateTime = new Date();
}
//Added an event listener and apply the rootScopr level.
var event = document.getElementById("btnAppyToDigest");
event.addEventListener('click', function() {
//The $apply method is use to update date time on rootscope forcefully.
$scope.$apply(function() {
//get dateTime
$scope.currentDateTime = new Date();
});
});
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJs $apply method</h2>
<div>
<div>
<button ng-click="getUpdatedDateTime()">Click to Update DateTime</button>
<button id="btnAppyToDigest">Click to Update DateTime forcefully.</button>
</div>
<div>Result : {{currentDateTime | date:'MM-dd-yyyy HH:mm:ss'}}</div>
</div>
<div>
<br><a href="http://www.code-sample.com/2014/09/angularjs-documentation.html">Click to know more details</a>
</div>
</body>
</html>
/* Put your css in here */