How to change the div after user login

Question

I am building a website and i wish to make a single page application. Iam using nodejs as a backend and angular as a frontend. The thing iam stuck up is i want to show a particular div when user is not logged in, on the event of logging in the other div should be shown. What is the best way to make it happen.

As per my knowledge i have used ng-if as the attribute of both the div which i want to replace each other. I had a angular function for verifying the logged in sesssion with a name isloggedin().

so i used <div ng-if="!checkLoggedin()"> in one div and <div ng-if="checkLoggedin()"> in other div.

So on the first request the page is not logged in and the conditions works as it should. But after i logged in the from the second is not showing up.

Is it something i wrongly expect to happen or is there any other to make this happen. I had check the value of the function and it has data in one condition and 0 in other condition. Am i wrong somewhere.

Added the conditional code.

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) {
    var deferred = $q.defer();

    $http({
        method: 'GET',
        url: "http://localhost:3000/loggedin"
    }).success(function (user) {
        if (user !== '0') {
            $rootScope.message = 'You are log in.';
            $timeout(deferred.resolve, 0);
            deferred.resolve();
            $location.url('/home');

        } else {
            $rootScope.message = 'You need to log in.';
            $timeout(function () {
                deferred.reject();
            }, 0);
            deferred.reject();
            $location.url('/login');
        };
    });

Here is the form code.

<form action="/#/home" ng-submit="login(user)">
                                            <div class="form-group">
                                                <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none">
                                                    <div class="input-group-addon"><i class="fa fa-envelope text-muted"></i></div>
                                                    <input class="form-control" placeholder="email" ng-model="user.email">
                                                </div>
                                            </div><!-- /.form-group -->
                                            <div class="form-group">
                                                <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none">
                                                    <div class="input-group-addon"><i class="fa fa-lock text-muted"></i></div>
                                                    <input type="password" class="form-control" placeholder="Password" ng-model="user.password">
                                                    <div class="input-group-addon"><small><a href="/#/forgotpass">Forgot?</a></small></div>
                                                </div>
                                            </div><!-- /.form-group -->
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="nice-checkbox nice-checkbox-inline">
                                                            <input type="checkbox" name="rememberSignIn1" id="rememberSignIn">
                                                            <label for="rememberSignIn1">Remember</label>
                                                        </div>
                                                    </div><!-- /.cols -->
                                                    <div class="col-md-6">
                                                        <button type="submit" class="btn btn-sm btn-block btn-info" style="margin-top:5px" >SUBMIT</button>
                                                    </div><!-- /.cols -->
                                                </div><!-- /.row -->
                                            </div><!-- /.form-group -->
                                        </form><!-- /form -->
                                    </div><!-- /.panel-body -->

Answer 1

As I see, the blocks

<div ng-if="!checkLoggedin()">

and

<div ng-if="checkLoggedin()">

will be executed on DOM load (page load). So there is no chance for the model to update. The right approach here will be to use a scope variable in the if blocks as

<div ng-if="isLoggedIn"> ... <div ng-if="!isLoggedIn">

and to update the variable's value in the success handler of the service call, say,

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) {
var deferred = $q.defer();

$http({
    method: 'GET',
    url: "http://localhost:3000/loggedin"
}).success(function (user) {
    if (user !== '0') {
        // set value here
        $rootScope.isLoggedIn = true;

        $rootScope.message = 'You are log in.';
        $timeout(deferred.resolve, 0);
        deferred.resolve();
        $location.url('/home');

    } else {
        $rootScope.message = 'You need to log in.';
        $timeout(function () {
            deferred.reject();
        }, 0);
        deferred.reject();
        $location.url('/login');
    };
});

This way we can be sure that the model has updated values and the right if block will be added to DOM.