PhoneGap Angular iOS App displaying white screen only
<p>We've built a HTML/JS iOS app using Angular which works perfectly on desktop browsers but when I wrap it up as PhoneGap project and try to run it on my device, it simply loads the splash screen which fades out to a <strong>blank white</strong> screen. I've been looking around for similar issues with the routing maybe? I just can't figure it out. Can anybody help?</p>

<p><strong>HTML</strong></p>

<p></p>

<pre><code>&lt;html&gt;
&lt;head&gt;

    &lt;meta name="format-detection" content="telephone=no"&gt;
    &lt;meta name="msapplication-tap-highlight" content="no"&gt;
    &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;

    &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/nav.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/bootstrap-grid-12.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"&gt;

    &lt;script type="text/javascript" src="scripts/app.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/platformOverrides.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/index.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/main.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

    var is_ios = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);

    if (is_ios) {

        $('&lt;link rel="stylesheet" type="text/css" href="css/iosbugfix.css" /&gt;').appendTo("head");

    };

    &lt;/script&gt;

    &lt;base href="/"&gt;

&lt;/head&gt;

&lt;body ng-app="appItmt" ng-controller="dataController"&gt;

    &lt;div ng-view&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>(function () {
    var itmtApp = angular.module("appItmt", ["ngRoute", "cgBusy"]);

    itmtApp.config([
        '$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/how-to/', {
                    templateUrl: 'how-to.html',
                    controller: 'dataController'
                })
                 .when('/privacy/', {
                     templateUrl: 'privacy.html',
                     controller: 'dataController'
                 })
                 .when('/about/', {
                     templateUrl: 'about.html',
                     controller: 'dataController'
                 })
                 .otherwise({
                     templateUrl: 'main.html',
                     controller: 'dataController'

                 });

            $locationProvider.html5Mode(true);
        }
    ]);
}());
</code></pre>