ng-hide not working with setInterval

Question

HTML:

<div ng-hide="!timeout">
     First
</div>

<div ng-hide="timeout">
    Second   
</div>

JS:

var counter = 0;
$scope.timeout = false;

var interval = setInterval(function loop() { 
    if (++counter == 4){
                clearInterval(interval);
                $scope.timeout = true;
        }
        return loop
}(), 5000);

After I run, the result shown "First". After counter reached to 4 and $scope.timeout change to true the result still shown "First" instead of "Second".

Thank you.

Answer 1

setInterval is not wrapped in a $scope.$apply() Either, use the angular provided $interval or add $scope.$apply(); in your setInterval function.