.state('app', {
url:'/',
abstract: true,
views:{
'bodyLogin': {templateUrl : 'views/login/body.html',
controller  : 'BodyController'},
'bodyMain': {templateUrl : 'views/main/body.html',
controller  : 'BodyController'}}
})
.state('app.mainUnreg', {
url:'home',
views: {
'content@app': {
templateUrl : 'views/login/home.html'
}}})
.state('app.mainReg', {
 url:'mainMenu',
views: {
'header@app': {
templateUrl : 'views/main/header.html'
},
'sidebar@app': {
templateUrl : 'views/main/sidebar.html'
},
'middle@app': {
templateUrl : 'views/main/home.html'
},
'footer@app': {
templateUrl : 'views/main/footer.html'
}},
controller: 'HomeController'})

<div ng-if="!loggedIn" ui-view="bodyLogin" class="site-wrapper" ui-sref-active="app.mainUnreg"></div>
<div ng-if="loggedIn" ui-view="bodyMain" ui-sref-active="app.mainReg"></div>

.controller('BodyController', [..., function(...){
//this line is to check whether the user has been authenticated or not
if(Account.isAuthenticated() === false) {
$scope.loggedIn = false;}
// ------------

if($scope.loggedIn === false){
$scope.layout = 'login';
$state.go('app.mainUnreg');
}
else{$scope.loggedIn = true;
$scope.layout = 'styles';
$state.go('app.mainReg');
}}])

.controller('LoginController', [..., function (...) {    $currentUserId = Account.getCurrentId();
$scope.$stateParams = $stateParams;    $scope.loginData = {};    $scope.doLogin = function() {                AuthService.login($scope.loginData)
.then(function() {
$scope.loggedIn = true;
location.reload();        });    };}])

.controller('LogoutController', [..., function(...) {
AuthService.logout()
.then(function() {
console.log("Logging out . . .");
$scope.loggedIn = false;
$state.go('app');     });     }]);
And some additional service beside lb-services.js to handle my authentication,

function login(loginData) {
        var params = { rememberMe: loginData.rememberMe };
        var credentials = {
            email: loginData.email,
            password : loginData.password
        };
        return User
            .login(params, credentials)
            .$promise.then(function(response){                $rootScope.currentUser = {...};
                console.log($rootScope.currentUser);
            },
            function(response) {
                console.log(response);
            });
    }
    function logout(){
        return User
        .logout()
        .$promise.then(function(){
            $rootScope.currentUser = null;
        });
    };

if(Account.isAuthenticated() === false){...}

$LoopBack$accessTokenId = ....
$LoopBack$currentUserId = ...
$LoopBack$rememberMe = true // automatically become true?