How to apply delay on AngularJS

Question

I am using below code, In laravel blade

<div ng-show="displayErrorMsg" class="form-group m-b alert alert-danger">{{errorMsg}}

In angularjs controller

$scope.errorMsg = "Data Empty";
$scope.displayErrorMsg = true;
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000);

Message not disappear after 2 second automatically as given.

But when I simply put alert("test"); or click anywhere message disappears. How to resolve this problem ?

Answer 1

Just inject $timeout in your controller and use this.

$timeout(function() { $scope.displayErrorMsg = false;}, 2000);

Also you can use $digest or $apply as below

setTimeout(function() {
    $scope.displayErrorMsg = false;
    $scope.$digest();
}, 2000);

setTimeout(function () {
  $scope.$apply(function(){
      $scope.displayErrorMsg = false;
  });
}, 2000);

Check here how these works,

http://www.sitepoint.com/understanding-angulars-apply-digest/

Answer 2

I usually need a function to wait a little bit for any reason, for testing purposes only. In Java, we can use the Thread.sleep(). However, In JavaScript I prefer to use a simple function I found here:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

It has been working for me in several scenarios, including AngularJS. But, please, remember that function shouldn't be used in production environments unless you know exactly what you're doing.