Q: AngularJS - ng-show shows content while objects load I am using AngularJS with Firebase for a webapp. I am using Firebase as the user authentication. Each user has an email in their profile, and I want to display a warning to the user if they have not set their email. However, when a user is logged in and has correctly set their email, the warning flashes for a split second at the top of the page. I have figured out that this is because the user object does not fully load in the first few milliseconds so the warning is displayed even when the email is set. If I replace !(user.email) with a false variable the warning never shows up. The variable user.email is at the direct control of Firebase.
<div ng-show="user">
   <div class="row" ng-show="!(user.email)">
       <div class="col-md-12">
         <div class="alert alert-warning">
           Warning! You must...
         </div>
       </div>
    </div>
</div>

Is there any way I can get the warning not to display?

A: You can add the ng-hide class to hide the element by default. Once your object loads, the ng-show directive will kick in and add or remove the ng-hide class as necessary.
<div ng-show="user">
   <div class="row ng-hide" ng-show="!(user.email)">
       <div class="col-md-12">
         <div class="alert alert-warning">
           Warning! You must...
         </div>
       </div>
    </div>
</div>

The ng-hide class and methods to override certain behaviors are detailed here.

A: Take a look at ng-init. You can use it to initialize a default on load.

A: You should have some mock value in user.email. This can be done via the controller or via ng-init.
Up on loading the user you should check the profile for email and set the user.email to that or delete the property.

If the user object is under the control of another script, you should use another scope variable for ng-show. You should initialize this variable with a mock value and update it with user object once the user is loaded. 

A: <div class="ng-hide" ng-show="user && !user.email" ng-cloak>
   <div class="row >
       <div class="col-md-12">
         <div class="alert alert-warning">
           Warning! You must...
         </div>
       </div>
    </div>
</div>

https://docs.angularjs.org/api/ng/directive/ngCloak
