Angular alert will not display after being closed

Problem :

when you try to close the angular success and error pop up using manullay or using alert('close') event.

HTML

  <div class="cacheSuccessMessage alert alert-success alert-dismissable-success">
       <span class="cacheMessageHeader"><strong></strong></span>
        <div class="cacheMessageDetails"></div>
  </div>

JS:

$(".alert-dismissable-success").fadeTo(4000, 500).slideUp(500,
 function() {
 $(".alert-dismissable-success").alert('close');
})

so when you fire event of close Data-dismiss completely removes the element. 


Solution : 

 Use jQuery's .hide() or angular hide method instead to hide error.
and modify you HTML and JS as 

HTML

  <div class="cacheSuccessMessage alert alert-success">
           <span class="cacheMessageHeader"></span>
            <div class="cacheMessageDetails"></div>
  </div>

JS:

$(".cacheSuccessMessage").fadeTo(4000, 500).slideUp(500,
 function() {
 $(".cacheSuccessMessage").hide();
})