ng-view not showing with resolve

Question

I am using resolve in this way (seems to be the standard way to do this way). But the view is not showing. Any ideas what I missed? Best Regards

angular.module('fifaApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider.when('/team/:code', {
      templateUrl: 'views/team_details.html',
      controller:'TeamDetailsCtrl as teamDetailsCtrl',
      resolve: {
        auth: function(UserService){
          return UserService.session();
        }
      }
    });
  });

  .factory('UserService', ['$http', function($http) {
    var service = {
      isLoggedIn: false,
      session: function() {
        var promise = $http.get('/api/session')
              promise.success(function(response) {
          service.isLoggedIn = true;
          return response;
        });
        return promise;
    };
    return service;
  };
  }]);

  .controller('MainCtrl', ['$scope','auth',
    function($scope,auth) {
      $scope.auth = auth.response;
  }]);

And html:

<div class="team-details-container card">
  <div class="team-logo">
      <img title="Image Courtesy: Wikipedia"
           ng-src="{{teamDetailsCtrl.team.logoUrl}}">
  </div>
  <div class="name">
      <span ng-bind="teamDetailsCtrl.team.name"></span>
      (<span ng-bind="teamDetailsCtrl.team.fifaCode"></span>)
  </div>
  <div class="detail">
    <div class="label">
      <span>Nickname</span>
    </div>
    <div class="title">
      <span ng-bind="teamDetailsCtrl.team.nickname"></span>
    </div>
  </div>
  <div class="detail">
    <div class="label">
      <span>FIFA Ranking</span>
    </div>
    <div class="title">
      <span ng-bind="teamDetailsCtrl.team.fifaRanking">
      </span>
    </div>
  </div>
  <div class="detail">
    <div class="label">
      <span>Association</span>
    </div>
    <div class="title">
      <span ng-bind="teamDetailsCtrl.team.association"></span>
    </div>
  </div>
  <div class="detail">
    <div class="label">
      <span>Head Coach</span>
    </div>
    <div class="title">
      <span ng-bind="teamDetailsCtrl.team.headCoach"></span>
    </div>
  </div>
  <div class="detail">
    <div class="label">
      <span>Captain</span>
    </div>
    <div class="title">
      <span ng-bind="teamDetailsCtrl.team.captain"></span>
    </div>
  </div>
</div>

Answer 1

Add $q in service.

.factory('UserService', ['$http' , '$q', function($http, $q) {
    var service = {
      isLoggedIn: false,
      session: function() {
        var deferred = $q.defer();
        var promise = $http.get('/api/session')
        promise.success(function(response) {
            service.isLoggedIn = true;
            deferred.resolve(response);
        });

        return deferred.promise;
    };
    return service;
  };
 }]);