AngularJS async validation makes error messages flicker -

i using simple async validator check existance of username directive this

var app = angular.module('app');  app.directive('usernameavailablevalidator', function($http, $q) {     return {         require : 'ngmodel',         link : function($scope, element, attrs, ngmodel) {             ngmodel.$asyncvalidators.usernameavailable = function (modelvalue, viewvalue) {                 var value = modelvalue || viewvalue;                 return $http.get('/api/check-availability?username=' + value)                     .then(function (response) {                         if (response.data.userfound) {                             return $q.reject();                         }                         return true;                     });             };         }     }; }); 

this works. problem error , success messages display ng-if flickers while type. don't know how solve problem. , instead of showing more code have uploaded form demonstrate flickering.

i have 1 form without async validation not flicker @ all.

and 1 form async validation makes messages flicker.

the form not flicker can found here:

http://itexpert.no/register2

here if try type in username "alexander", , blur, , backspace way nothing , write "alexander" again see messages show supposed to. not flicker. without async validation.

now if try same thing above on form async validation see mean messages flickering.

http://itexpert.no/register

this find frustrating hit wall here , don't know how prevent it.

since angular updating model user type, many requests being made using async validator.

use ng-model-options directive async validator input.

ng-model-options="{ updateon: 'blur' }"

this way async calls made when leave input.

the other option use debounce effect

ng-model-options="{ debounce: 1000 }"

this options tells update model after 1 second delay.

please see documentation on ng-model-options https://code.angularjs.org/1.3.13/docs/api/ng/directive/ngmodeloptions