window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
function myCtrl($scope){
var keepgoing = true;
$scope.autoUpdateTimer = 30;
animate();
var currentSecond;
function animate() {
if(keepgoing){
requestAnimFrame( animate );
draw();
}
}
function draw() {
if(!$scope.$$phase && currentSecond !== new Date().getSeconds()){
$scope.$apply(function() {
$scope.autoUpdateTimer--;
});
currentSecond = new Date().getSeconds();
}
}
}
<div ng-controller='myCtrl'>
<p>{{autoUpdateTimer}}</p>
</div>
External resources loaded into this fiddle: