I have this small piece of code that uses setInterval method:
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(updateClock, 1000);
};
and html as follows:
<!doctype html>
<html ng-app>
<head>
<script src=".2.0-rc.2/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}!</h1>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
However, setInterval in MyController does not update time.
Where possibly is wrong here ?
It works this way according to a book :
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
Why is that and what goes wrong without using @scope.$apply ?
I have this small piece of code that uses setInterval method:
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(updateClock, 1000);
};
and html as follows:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}!</h1>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
However, setInterval in MyController does not update time.
Where possibly is wrong here ?
It works this way according to a book :
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
Why is that and what goes wrong without using @scope.$apply ?
Share Improve this question edited Jul 13, 2017 at 1:21 Alejandro Teixeira Muñoz 2,7681 gold badge23 silver badges31 bronze badges asked Jul 3, 2015 at 13:01 simi kaursimi kaur 1,2773 gold badges16 silver badges19 bronze badges 1- Will you please give a js fiddle link for this. – Amaranadh Meda Commented Jul 3, 2015 at 13:15
2 Answers
Reset to default 12Use the angular $interval service.
function($scope, $interval) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
$interval(updateClock, 1000);
}
If you use the JS setInterval() then you will need $scope.$apply() to your method.
var updateClock = function() {
$scope.clock = new Date();
$scope.$apply();
};
The better solution is to use $interval (angular)
$interval(updateClock, 1000);