Baig Baig - 3 months ago 24
AngularJS Question

Ionic - App works fine on browser and iOS simulator but not in android simulator

I am really new to the mobile development world and trying my hands on it using IonicFramework.

I am creating a login form and on successful login the user gets take to another state which is called

. Everything seems to be working fine when I run the command
ionic serve
I am able to login and proceed to the next state and all seems to be fine on iOS simulator as well but on Android simulator on clicking the login button nothing happens, I don't see any error either.

My attempt


<ion-view title="Login">
<ion-content class="has-header" padding="true">
<form class="list">
<h2 id="login-heading3" style="color:#000000;text-align:center;">Welcome back!</h2>
<div class="spacer" style="width: 300px; height: 32px;"></div>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="" ng-model="credentials.username">
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" placeholder="" ng-model="credentials.password">
<div class="spacer" style="width: 300px; height: 18px;"></div>
<a class="button button-positive button-block" ng-click="login()">Sign In</a>

is linked with

Here is my
which contains the

.controller('loginCtrl', function ($scope, $state, $ionicHistory, User) {

$scope.credentials = {
username: '',
password: ''
$scope.login = function () {
.then(function (response) {
//Login should not keep any history
$ionicHistory.nextViewOptions({historyRoot: true});

$scope.message = "this is a message loginCtrl";

Here is my
service that takes care of the login logic

angular.module('app.user', [])
.factory('User', function ($http) {

var apiUrl = '';
var loggedIn = false;

return {
login: function (credentials) {
console.log(JSON.stringify('inside login function'));
return $ + '/tokens', credentials)
.success(function (response) {
console.log(JSON.stringify('inside .then of login function'));
var token =;
$http.defaults.headers.common.Authorization = 'Bearer ' + token;

.error(function (response) {
console.log('inside error of login function');

isLoggedIn: function () {
if (localStorage.getItem("token") != null) {
return loggedIn = true;

function persist(token) {

window.localStorage['token'] = angular.toJson(token);

Here is the
behind the login

.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'


I am really clueless at the moment as I cant seem to figure out why nothing happens on Android, from my troubleshooting all I could find was when I click on login button the code does not seem to be going inside the following function.

$scope.login = function () {
.then(function (response) {
//Login should not keep any history
$ionicHistory.nextViewOptions({historyRoot: true});

Any help will really be appreciated.


Install whitelist plugin first.

cordova plugin add cordova-plugin-whitelist

add following code in your config.xml file under your root directory of project

<allow-navigation href="*" />


<allow-navigation href="http://*/*" />

If still you are facing any issue, then you can check console while you are running in android device using chrome remote debugging

  • Connect your device with your machine.(Make sure USB debugging should be enable on your mobile).

  • write chrome://inspect in browser in your desktop chrome.

  • you will see connected device, select inspect and check console for log.