AngularJS duplicated element for 1 second

Question

I have my login form that contains a box to display the error message

<div class="ui negative message" ng-if="vm.message != ''">
    <span ng-bind="vm.message"></span>
</div>

The message is set inside my controller

LoginService.checkUser(vm.credentials).then(function(res) {
    $rootScope.token = res.data.token;
    $state.go('home');
}, function(err) {
    vm.error = true;
    if(err.status == 401){
        vm.message = "Error !";
    }
});

My problem is that the div containing the message is shown 2 times during 1sec after clicking on the login button. Thus during 0.5/1 second I have 2 times the same div with the same message.

User cannot see what it says but he can see something blinking.

How can I avoid getting a blink ?

Answer 1

Ok the error was a little bit stupid and was in part of the code that I did not show.

The full login function is

    vm.error = false;
    if (vm.credentials.username == '' || vm.credentials.password == '') {
        vm.error = true;
        vm.message = "Required username+password";
        return;
    }
    vm.message = "" //HERE IS THE PROBLEM

    LoginService.checkUser(vm.credentials).then(function(res) {
        $rootScope.token = res.data.token;
        $state.go('home');
    }, function(err) {
        vm.error = true;
        if(err.status == 401){
            vm.message = "Error";
        }
    });

I was editing the message to empty before setting it to the error.

I remove this line vm.message = "" and it is now working fine