Ionic Page is not loading - angularjs

Question

I have a mobile app screen which is built with ionic. The following image show the screen for that.
Once I clicked the contacts button in the home screen in the mobile It will load just a white blank screen. But when I run the app through the browser It is showing. The code for the above screen and the code for the home screen are as follows. Please let me know where I got wrong. I am very new to ionic framework.
Thanks.
=============================
Code for Home Screen - Html
<ion-content id="homeContent" scroll="false" class="padding">
<div class="row">
<span class="text-center blackBold">Menu</span>
Logout
</div>
<div class="row" id="buttonsFirstWrapper">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/contacts_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/groups_btn.png" /></div>
</div>
<div class="row">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/de_duplication_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/import_btn.png" /></div>
</div>
<div class="row">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/export_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/configuration_btn.png" /></div>
</div>
</ion-content>
========================
Code for the internal screen which loads once click on the contacts big button
<ion-content id="homeContent" scroll="false" class="padding">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="New Contact" icon-off="ion-person-add" icon-on="ion-person-add" href="#/contacts">
<ion-nav-view name="tab-chats">
<div class="row">
Home
<span class="text-center blackBold">New Contact</span>
Logout
</div>
<div id="createContact" class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First name</span>
<input type="text" placeholder="First name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Preferred Name</span>
<input type="text" placeholder="Preferred Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">NRIC</span>
<input type="text" placeholder="NRIC">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Phone</span>
<input type="tel" placeholder="Phone">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Mobile</span>
<input type="tel" placeholder="Mobile">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Block/House No:</span>
<input type="text" placeholder="Block/House No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Unit No:</span>
<input type="text" placeholder="Unit No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Street Name</span>
<input type="text" placeholder="Street Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Postal Code</span>
<input type="text" placeholder="Postal Code">
</label>
<label class="item item-input" style="height: 40px;">
<span class="input-label">Country</span>
<select
style="width: 100%; max-width: 100%; height: 40px;"
ng-model="engineer.currentActivity"
data-ng-options="cL.countryCode as cL.countryName for cL in CountryList">
</select>
</label>
</div>
<div id="loginBtnWrapper" class="col text-center">
<button style="margin-top: -15px" id="loginBtn" class="button button-positive">Create</button>
</div>
</ion-nav-view>
</ion-tab>
<ion-tab title="List Contacts" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/contacts">
<ion-nav-view name="tab-dash">
<div class="row">
Home
<span class="text-center blackBold">Contacts</span>
Logout
</div>
<div id="contactListing" class="list">
<div ng-repeat="eachContact in AllContacts" class="item item-button-right">
<h2 class="blackBold">{{ eachContact.FNM }}</h2>
<p class="blackBold">{{ eachContact.EML }}</p>
<p class="blackBold">{{ (eachContact.PNM != "" ? '(' + eachContact.PNM + ')' : "") }}</p>
Call
</div>
</div>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
===========================================
My application.js is as follows
angular.module('XXXXXXXXXX', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('contacts', {
url: '/contacts',
templateUrl: 'templates/contacts.html',
controller: 'ContactsCtrl'
})
.state('contact-details', {
url: '/contact-details',
templateUrl: 'templates/contact-details.html',
controller: 'ContactDetailsCtrl'
})
.state('logout', {
url: '/logout',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise("/");
})
.controller('HomeCtrl', function($scope, $http, $state, $ionicPopup, AuthService) {
AuthService.isLoggedIn('home');
})
.controller('ContactsCtrl', function($scope, $http, $state, $ionicPopup, AuthService, CommonServices, $ionicLoading) {
var contactList = null,
tempStr = "",
jsonStr;
$scope.AllContacts = [];
$scope.CountryList = [];
AuthService.isLoggedIn('contacts');
$scope.CountryList = CommonServices.retrieveCountryList();
$ionicLoading.show();
$http.get('SERVICE_CALL').success(function(data) {
tempStr = data.substr(8880, data.length);
jsonStr = JSON.parse(tempStr);
if (jsonStr.Contacts.length > 0){
angular.forEach(jsonStr.Contacts, function (obj) {
if ((typeof obj.FNM != "undefined") && (obj.FNM != null) && (obj.FNM != "")){
$scope.AllContacts.push(obj);
}
});
$ionicLoading.hide();
}
});
});

Answer 1

Some weeks ago, I've got a similar problem with my SPA (angualar.js, BootStrap) hosted inside SalesForce, on my iPad but not on my Desktop.
Sometimes, clicking on a button or doing something finished by a empty (white) screen...
I'm not sure it is the same problem than yours, but after some test/research, I've found that the problem was triggered by having a div element (filled with a ng-repeat)with a height greater than screen height inside a main div with height and width set as 100% (google maps).
To resume, when the ng-repeat return to much items, the container div growths outside the main div