AngujarJS async "authenticated" check

I want to show/hide elements in my HTML depending on whether user is authenticated. My HTML is static, checking is done by Ajax GET /check when there's a cookie called session. The following works:

HTML:

<div class="ng-cloak" ng-show="loggedIn()">Foo</div>
<div class="ng-cloak" ng-hide="loggedIn()">Bar</div>

CoffeeScript:

angular.module('app', ['ngCookies']).run ($cookies, $http, $rootScope) ->
    if $cookies.session
        $http.get('/check').success (data) -> $rootScope.user = data

    $rootScope.loggedIn = ->
        if $rootScope.user then true else false

The problem is, when user is authenticated (user is not null thus loggedIn() is true), there's a short period where Bar is still shown, because the script is still waiting for GET /check to return (so user is still null thus loggedIn() is false). How do I fix this?

UPDATE: Fiddle: http://jsfiddle.net/dexrN/1/ (removed $cookies and replaced $http with $timeout)

Since you need three states (not two), use ng-switch (instead of ng-hide/ng-show) to switch on three states: unknown, logged in, not logged in. You may need to use another $scope property for this.

@mark-rajcok is correct, but too verbose for my case. Here's the solution I end up using, basically introducing loggedOut():

<div class="ng-cloak" ng-show="loggedIn()">Foo</div>
<div class="ng-cloak" ng-show="loggedOut()">Bar</div>

CoffeeScript:

angular.module('app', ['ngCookies']).run ($cookies, $http, $rootScope) ->
    if $cookies.session
        $http.get('/check')
            .success (data) ->
                $rootScope.user = data
            .error -> 
                $rootScope.user = {}
                delete $cookies.session
    else
        $rootScope.user = {}

    $rootScope.loggedIn = -> $rootScope.user and $rootScope.user.username
    $rootScope.loggedOut = -> $rootScope.user and not $rootScope.user.username