Scope variables don't reflect in template - angularjs

Question

I have part of an angular app setup as follows:
<section >
<div ng-controller="setHeaderCtrl" class="navbar navbar-default header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-bar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand brand-text" ui-sref="index">
<span class="sports-text">Sports</span>
<span class="gully-text">Gully</span>
</a>
</div>
<div class="collapse navbar-collapse" id="collapsed-bar">
<ul class="nav navbar-nav navbar-left" ng-if="searchingAway">
<li class="local-search-cont">
<input type="text" class="local-type-top" placeholder="Search">
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!userObject">
<a ng-click="showLogin()" class="navbar-txt-block" style="cursor: pointer;">
Login
</a>
</li>
<li ng-if="userObject.user">
<a class="navbar-txt-block" ui-sref="home" style="cursor: pointer;">
Home
</a>
</li>
<li ng-if="userObject">
{{userObject}}
<a class="navbar-txt-block" style="cursor: pointer;">
{{userDetails.first_name}} {{userDetails.last_name}}
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
and my setHeaderCtrl is as follows:
app.controller('setHeaderCtrl',['$scope', '$rootScope', '$http', '$state', 'Page', '$modal',
function($scope, $rootScope, $http, $state, Page, $modal){
$rootScope.$on('userSet', function(){
var authKey = $rootScope.authKey;
$http.defaults.headers.common.Authorization = 'Token '+authKey;
$http.get('/loginCheck/').success(function(data){
$scope.userObject = data;
$scope.userDetails = data.user;
});
});
$scope.userObject = {}
$http.get('/loginCheck/').success(function(data){
$scope.userObject.user = data;
$scope.userDetails = data.user;
console.log($scope.userDetails);
}).error(function(data, status){
if(status == 401){
$scope.userObject.user = undefined;
}
});
$rootScope.$on('setAwayHeader', function(){
$scope.searchingAway = true;
});
$rootScope.$on('setIndexHeader', function(){
$scope.searchingAway = false;
});
$scope.showLogin = function(){
$modal.open({
windowClass: 'modal fade login-modal',
templateUrl: '/static/partials/modals/loginModal.html',
controller: 'loginCtrl'
})
}
}
])
My problem is such that the {{userObject}} or {{userDetails}} never displays. I can guarantee that there's a response from the server because console.log shows the correct data.

Answer 1

The expression ng-if="userObject" is not good, it always true. Replace it by boolean, or by userObject property: ng-if="userObject.user". Jsfiddle