I have a textbox and a submit button. When the user clicks the submit button, my javascript does some checks to make sure that the input is "valid" and, then ideally would show an error message if the input is invalid.

In my HTML I have a p tag that I want to show up when my variable vm.showError is set to true, and I want it to display the value of my variable vm.errorMsg:

<p ng-hide="!vm.showError">{{vm.errorMsg}}</p>

Inside my AngularJS controller I have the following code:

var valid = validateTextbox();

validateTextbox() returns a promise, whose value is an object that looks like this:

{
  valid: boolean,
  errorMsg: string
}

and then directly afterwards, I have the following:

valid.then(response => {
    if (!response.valid) {
        vm.showError = true;
        vm.errorMsg = response.errorMsg;
    } else {
        vm.showError = false;
        //call some other function that does stuff with the input
     }
});

I am wondering how can I actually ensure the error message shows up on time, due to the ng-hide value being set in a .then()? At the moment the error message shows up after I type another character into the textbox (I assume due to a rerender)