title: AngularJS hide div after delay
body: <p>While creating my app in AngularJS (awesome framework!) I stuck in one task: how to show and hide hidden <code>div</code> (<code>ng-show</code>) after some action.</p>
  
  <p><strong>Detailed description:</strong> using AngularUI <code>$modal</code> service I'm asking if user wants to perform action, if yes, I run service to POST request via <code>$http</code> to send which item I want to delete. After it finished I want to show hidden <code>div</code> with information, that process has accomplished successfully. I created a simple service with <code>$timeout</code> to set <code>div's</code> <code>ng-show</code> and hide after some time but it doesn't update variable assigned to <code>ng-show</code> directive. Here is some code:</p>
  
  <p><strong>Controller for listing and deleting items</strong></p>
  
  <pre><code> $scope.deleteSuccessInfo = false; //variable attached to div ng-show
  
   $scope.deleteCluster = function(modalType, clusterToDelete) {
  
      modalDialogSrvc.displayDialog(modalType)
          .then(function(confirmed) {
  
              if(!confirmed) {
                  return;
              }
  
              clusterDeleteSrvc.performDelete(itemToDelete)
                  .then(function(value) {
                      //my attempt to show and hide div with ng-show
                      $scope.deleteSuccessInfo = showAlertSrvc(4000);
                      updateView(itemToDelete.itemIndex);
                  }, function(reason) {
                      console.log('Error 2', reason);
                  });
  
          }, function() {
              console.info('Modal dismissed at: ' + new Date());
          });
  };
  
  function updateView(item) {
     return $scope.listItems.items.splice(item, 1);
  }
  </code></pre>
  
  <p><strong>Part of service for deleting item</strong></p>
  
  <pre><code>function performDelete(itemToDelete) {
  
      var deferred = $q.defer(),
          path = globals.itemsListAPI + '/' + itemToDelete.itemId;
  
      getDataSrvc.makeDeleteRequest(path)
          .then(function() {
              console.log('Item removed successfully');
              deferred.resolve({finishedDeleting: true});
          }, function(reason) {
              console.log('error ', reason);
              deferred.reject(reason);
          });
  
      return deferred.promise;
  }
  
  return {
      performDelete: performDelete
  };
  </code></pre>
  
  <p><strong>Simple service with $timeout to change Boolean value after some time</strong></p>
  
  <pre><code>angular.module('myApp')
      .service('showAlertSrvc', ['$timeout', function($timeout) {
  
          return function(delay) {
  
              $timeout(function() {
                  return false;
              }, delay);
  
              return true;
          };
  
      }]);
  </code></pre>
  
  <p>I tried <code>$scope.$watch('deleteSuccessInfo', function(a, b) {...})</code> with no effect. How to apply false after some delay? Or maybe You would achieve this in other way?</p>
  
  <p>Thank You in advance for any help!</p>