ngAnimate doesn't work when modify condition too fast in code - angularjs

Question

I am working on a search page. If no result was returned form server, the no result message box will appear, and if the user still search for that word again, I want the fade out and fade in effect for the message box for user to know the page worked for their search. Everything work fine for this case, since I hide the message box before send the search request to server.
But when I add some validation to the page, the fade out fade in effect doesn't work when I try to hide and show message box for invalid search criteria continuously. At fist I thought I was because I change message state too close in the code. But the problem seems to be different.
When I try to change message from no result to invalid, the effect happens.
It sounds complicated so here is the summary:
Multiple no results messages -> works fine (did call to server)
Multiple invalid search criteria -> doesn't work (no server call)
From no results to invalid search criteria -> works fine (no server call and I don't know why the above doesn't work but this does)
From invalid search criteria to no result -> works fine (no doubts because there is a server call)
I think this might have something to to with the built in $apply function in angular.
Here is the code
var showNoResult = function() {
vm.showSearchResult = false; //result table
vm.showMsg2 = false; //invalid
vm.showMsg1 = true; //no result
vm.showMsg = true; //message box
};
var showInvalid = function() {
vm.showSearchResult = false;
vm.showMsg1 = false;
vm.showMsg2 = true;
vm.showMsg = true;
};
var hideMsg = function() {
vm.showMsg = false;
vm.showMsg1 = false;
vm.showMsg2 = false;
};
vm.sendData = function(page) {
hideMsg();
if(!isFormValid()) {
showInvalid(); //problem here
return;
}
// call to server
mapData(function(data) {
data.pagenum = page || 1;
searchService.searchEmployee(data).then(function(response) {
if (response.data[0] == 0) {
showNoResult();
return;
}
vm.users = response.data[1];
vm.totalItem = response.data[0];
vm.showSearchResult = true;
});
});
};
And this is the html:
<div id="message-box" class="panel panel-default ng-hide" ng-show="searchCtrl.showMsg">
<div class="panel-body">
<i class="fa fa-info" aria-hidden="true" id="no-result-icon"></i>
<p id="no-result-text" ng-show="searchCtrl.showMsg1">
<b>{{ searchCtrl.msg.msg1.msg1_1}}</b>
<br>
{{ searchCtrl.msg.msg1.msg1_2}}
</p>
<p id="invalid-form-text" ng-show="searchCtrl.showMsg2">
{{ searchCtrl.msg.msg2 }}
</p>
</div>
</div>