MEAN Stack + passport local: using sessions on a single page app

Question

I tried implementing this tutorial on how to add an authentication process to a MEAN app: http://mherman.org/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/#.VgUaT_mqpBc

The change i tried to implement is to make the app a single page app ... so the only routes i left were the post routes for login ... i am addressing the login because if i can make that work ... the rest will follow

So my app consists of a google map that fills the page and two buttons (login and register) that open a modal window ... inside i have login form ... here are the codes for the angular controller of the modal window and the jade template

Controller:

angular.module('myApp')
  .controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'settings', '$location', 'AuthService', function ($scope, $modalInstance, settings, $location, AuthService) {
    $scope.settings = settings;
    $scope.texts = {
      login: {
        title: "Login details",
        button: "Login"
      },
      register: {
        title: "Registration form",
        button: "Register"
      }
    };
    $scope.register = function () {
      $modalInstance.close();
    };
    $scope.login = function () {
      // initial values
      $scope.error = false;
      // call login from service
      AuthService.login($scope.loginForm.username, $scope.loginForm.password)
        // handle success
        .then(function () {
          console.log(AuthService.getUserStatus());
          $modalInstance.close();
        })
        // handle error
        .catch(function () {
          $scope.error = true;
          $scope.errorMessage = "Invalid username and/or password";
        });
      //$modalInstance.close();
    };
    $scope.cancel = function () {
      $modalInstance.close();
    };
  }])

Jade template for modal window:

div(class="modal-header")
  h3(class="modal-title") {{texts[settings.action].title}}
  div(class="modal-body")
    div(ng-show="error", class="alert alert-danger")
    form(class="form", ng-submit="login()")
      div(class="form-group")
        label Username
        input(type="text", class="form-control", name="username", ng-model="loginForm.username")
      div(class="form-group")
        label Password
        input(type="password", class="form-control", name="password", ng-model="loginForm.password")
  div(class="modal-footer")
    button(ng-show="settings.action=='login'", class="btn btn-primary", type="button", ng-click="login()") {{texts.login.button}}
    button(ng-show="settings.action=='register'", class="btn btn-primary", type="button", ng-click="register()") {{texts.register.button}}
    button(class="btn btn-warning", type="button", ng-click="cancel()") Cancel

So my pb is this: the passport authenticate gets executed correctly .. I get the login success message ... but on refresh ... if I run AuthService.isLoggedIn() .. I get false ...

Here is the service:

angular.module('myApp').factory('AuthService',
  ['$q', '$timeout', '$http',
    function ($q, $timeout, $http) {

      // create user variable
      var user = null;

      // return available functions for use in controllers
      return ({
        isLoggedIn: isLoggedIn,
        getUserStatus: getUserStatus,
        login: login,
        logout: logout,
        register: register
      });

      function isLoggedIn() {
        if(user) {
          return true;
        } else {
          return false;
        }
      }

      function getUserStatus() {
        return user;
      }

      function login(username, password) {

        // create a new instance of deferred
        var deferred = $q.defer();

        // send a post request to the server
        $http.post('/user/login', {username: username, password: password})
          // handle success
          .success(function (data, status) {
            if(status === 200 && data.status){
              user = true;
              deferred.resolve();
            } else {
              user = false;
              deferred.reject();
            }
          })
          // handle error
          .error(function (data) {
            user = false;
            deferred.reject();
          });

        // return promise object
        return deferred.promise;

      }

    }]);

Here is the post route for the passport.authenticate

router.post('/login', function (req, res, next) {
  passport.authenticate('local', function (err, user, info) {
    if (err) {
      return next(err)
    }
    if (!user) {
      return res.status(401).json({err: info})
    }
    req.logIn(user, function (err) {
      if (err) {
        return res.status(500).json({err: 'Could not log in user'})
      }
      res.status(200).json({status: 'Login successful!'})
    });
  })(req, res, next);
});