$http not working. No errors are returned in console

Question

I'm making a mobile app and I have a controller that handles user login. It makes a http call (currently to localhost) to check if the user is valid. For some reason it won't fire off the $http call and the console says nothing about it failing. I'm new to AngularJS and I've probably made a beginner mistake in my code. I'm using AngularJS with Ionic Framework.

This is my LoginController:

.controller('LoginCtrl', ['$scope', '$ionicPopup', 'User', '$window', '$http', '$templateCache', function($scope, $ionicPopup, User, $window, $http, $templateCache){
    $scope.authUser = function(){
        console.log('authUser initialized');
        var email = document.getElementById('User_email');
        var password = document.getElementById('User_password');
        console.log('email=' + email.value);
        console.log('password=' + password.value);

        console.log('logging in...');
        if(email.value == '' || password.value == ''){
            var alertPopup = $ionicPopup.alert({
                title: 'Failed to login',
                template: 'Both fields need to be filled.'
            });
            alertPopup.then(function(res){
                console.log('Both fields need to be filled.');
            });
        } else {
            console.log('Contacting API server...');
            $scope.$apply(function(){
                $http({
                    method: 'POST',
                    url: 'http://api.tb.local/api.php',
                    data: { 'action': 'user/auth', 'email': email.value, 'password': password.value },
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    cache: $templateCache
                }).
                success(function(response){
                    console.log('Response success');
                    console.log(response);
                    if(response.valid){
                        console.log('Login success. Redirecting to welcome page...');
                        $window.location.href = '#/welcome';
                    } else {
                        var alertPopup = $ionicPopup.alert({
                            title: 'Failed to login',
                            template: 'Wrong credentials. Please try again.'
                        });
                        alertPopup.then(function(res){
                            console.log('Wrong credentials. Please try again.');
                        });
                    }
                }).
                error(function(response){
                    var requestFailDialog = $ionicPopup({
                        title: 'Internal Error',
                        template: 'The server encountered an unknown error.'
                    });
                    requestFailDialog.then(function(res){
                        console.log('Internal Error: ' + response);
                    });
                });
            });
        }
    }
}])

The last thing I get in my console is Contacting API server....

I tested my API manually and it returns a json { "valid": true } just like it should.

Answer 1

Try to Remove cache: $templateCache from $http request.