Почему $ scope не работает на представлении?

Я получил следующий контроллер:

.controller('LogInController', function(logInFactory, $scope, $location, $state){
     $scope.logIn = function() {
            $scope.dataLoading = true;
            logInFactory.logIn($scope.email, $scope.password, function (response) {
                if (response.success) {
                    $scope.userName = response.userName;
                    console.log('userName', $scope.userName);
                    logInFactory.setCredentials($scope.email, $scope.password);
                    $location.path('/users');
                } else {
                    $scope.dataLoading = false;
                }
            });
        };
    $scope.clearCredentials = function(){
        $state.go('login');
        logInFactory.clearCredentials();
    };    
});//End controller

Я хочу использовать его в этом представлении:

<div class="header" ng-controller = 'LogInController'>
    <img src= "logo.jpg">
    {{userName}}
    <button ng-click = 'clearCredentials()'> Cerrar sesión</button>
</div>

Но userName не отображается в представлении, но когда я печатаю его на контроллере, он отображается правильно. Это представление отображается после вызова функции logIn().

Это функция logIn на моей фабрике:

var logIn = function(email, password, callback){
            var URL;

            if(ENV.mocksEnable){
                URL = ENV.apiMock + ENV.logInMock;
                return (
                    $timeout(function () {
                        var response;
                        getUser()
                        .then(function (user) {
                            console.log('USER', user);
                            if (user !== null) {
                                response = { success: true, userName: user.userName};
                            } else {
                                response = { success: false, message: 'Username or password is incorrect' };
                            }
                            callback(response);
                        });
                    }, 1000)
                );
            }else{
                URL = ENV.apiURL + ENV.logIn;
                return (
                    $http.post(URL, {email : email, password : password})
                    .then(function onFulfilled(response){
                        var data = response.data;
                        userName = data.username;
                        userEmail = data.email;
                        userId  = data.id;
                        profiles = data.profiles;
                        callback(response);
                        return data;
                    })
                    .catch(function onRejected(errorResponse){
                        console.log('Error in logInFactory');
                        console.log('Status: ', errorResponse.status);
                        callback(errorResponse);
                        return errorResponse;
                    })
                );
            }
        };//End login

Я запускаю функцию logIn() в этом представлении

<form ng-submit = 'logIn()'>
  <h1>Log In</h1>       
  Correo electrónico:
  <input type="email" ng-model='email' required><br>
  Contraseña
  <input type="password" ng-model='password' required><br>
  <input type="submit" value="Log in">
</form>

Когда я тигрирую logIn(), я должен пойти в этот заголовок и показать имя пользователя.