Angular error message flashes very briefly on screen when using angular-ui's ui-date datepicker

Question

I'm running into an issue where ng-message is flashing the 'required' error message despite there being input in the input box. What happens is that it very briefly flashes the error message: "THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!)" on the screen before it disappears right away. Sorry for the caps but I wanted to make the message easier to see before it disappears.

Here is a link to my plunker. Please enter any input and then click elsewhere on the page so that the input field loses focus. Pay attention because the error message in red will flash by briefly then disappear. If you didn't notice the message flash by quickly, you will have to reload the page again to see it happen again.

Why is this happening? I believe it has something to do with ui-date because I'm not able to replicate the problem without ui-date.

Here's a snippet of the code:

<form name="reportform" ng-submit="process_form()" novalidate >
  <input name="startdate" placeholder="Enter a start date" ui-date ng-model="startdatevalue"  required>
  <ng-messages ng-if='reportform.startdate.$touched' for="reportform.startdate.$error">
    <ng-message when="required" class="error-message">
      THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!)
    </ng-message>
  </ng-messages>
  <button ng-disabled="reportform.$invalid" type="submit">
    Submit Query
  </button>
</form>

Thanks for your help.

Answer 1

Okay, this may or may not be relevant to your specific error message displaying, and it appears to be a solution when templating is used only. However, after trying a number of things I came across:

ng-cloak

From the documentation:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

I added this to each of my ngMessages divs and the error flashing briefly went away, makes sense.