Cordova AngularJS Ionic Tabs contents are overlapping on first load
<p>I'm new to Cordova angularjs and ionic. I am trying to display a page with tabs. This is working but the problem is when page is loaded first, tabs are overlapping each other for seconds and then it displays normally afterwards.</p>

<p>Here's my code:</p>

<p><strong>index.html</strong></p>

<pre><code>  &lt;ion-tabs class="tabs-striped tabs-icon-top tabs-color-positive"&gt;
            &lt;ion-tab title="News" icon="ion-home" href="#home"&gt;
                &lt;div id="home"&gt;
                    &lt;ion-pane&gt;
                        &lt;ion-header-bar class="bar-dark"&gt;
                          &lt;h1 class="title"&gt;Home&lt;/h1&gt;
                        &lt;/ion-header-bar&gt;

                        &lt;ion-content class="scroll-content ionic-scroll has-header has-tabs has-tabs-icon-top"&gt;
                                &lt;div class="card"&gt;
                                    &lt;div class="item item-text-wrap"&gt;
                                        This is a basic Card which contains an item that has wrapping text.
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="card"&gt;
                                    &lt;div class="item item-text-wrap"&gt;
                                        This is a basic Card which contains an item that has wrapping text.
                                    &lt;/div&gt;
                                &lt;/div&gt;
                        &lt;/ion-content&gt;
                    &lt;/ion-pane&gt;
                &lt;/div&gt;
            &lt;/ion-tab&gt;
            &lt;ion-tab title="Report" icon="ion-compose" href="#report"&gt;
                &lt;div id="report"&gt;&lt;/div&gt;
            &lt;/ion-tab&gt;

  &lt;/ion-tabs&gt;
</code></pre>

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

<pre><code> app.run(function ($rootScope, $ionicPlatform, $cordovaNetwork, $cordovaBatteryStatus, $cordovaLocalNotification, $cordovaPush) {

$ionicPlatform.ready(function () {
  if (window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  }
  if (window.StatusBar) {
    StatusBar.styleDefault();
  }

  $cordovaLocalNotification.registerPermission().then(function () {
    //alert("registered");
  }, function () {
    //alert("denied registration");
  });

  var iosConfig = {
    "badge": true,
    "sound": true,
    "alert": true
  };
  $cordovaPush.register(iosConfig).then(function (result) {
    //alert("device token: " + result.deviceToken);
  }, function (error) {
    //alert("error " + error);
  });

  $rootScope.$on('$cordovaPush:notificationReceived', function (event, notification) {
    if (notification.alert) {
      navigator.notification.alert(notification.alert);
    }
    if (notification.sound) {
      var snd = new Media(event.sound);
      snd.play();
    }
    if (notification.badge) {
      $cordovaPush.setBadgeNumber(notification.badge).then(function (result) {
        // Success!
      }, function (err) {
        // An error occurred. Show a message to the user
      });
    }
  });


  $rootScope.$on("$cordovaNetwork:offline", function (event, result) {
    alert("Device is now Offline!");
  });


  $rootScope.$on("$cordovaNetwork:online", function (event, result) {
    alert("Device is Online!");
  });

  $rootScope.$on("$cordovaBatteryStatus:status", function (event, status) {
    //alert("status: " + status);
  })
})
})

  app.config(function ($ionicConfigProvider, $stateProvider, $urlRouterProvider, $cordovaFacebookProvider, $cordovaAppRateProvider, $cordovaInAppBrowserProvider) {

if (!window.cordova) {
  var appID = 1234567890;
  var version = "v2.0"; // or leave blank and default is v2.0
  //$cordovaFacebookProvider.browserInit(appID, version);
}

var browserOptions = {
  location: "yes",
  toolbar: "yes"
};

document.addEventListener("deviceready", function () {
  var preferences = {
    iosURL: "some URL",
    appName: 'APP NAME',
    language: 'fr'
  };
  $cordovaAppRateProvider.setPreferences(preferences);
}, false);

$cordovaInAppBrowserProvider.setDefaultOptions(browserOptions);

$stateProvider
  .state('menu', {
    url: "/menu",
    templateUrl: "app/menu.html"
  })

  .state('about', {
    url: "/about",
    templateUrl: "app/about.html"
  })

  .state('appAvailability', {
    url: '/appAvailability',
    templateUrl: 'app/appAvailability/appAvailability.html',
    controller: "AppAvailabilityCtrl"
  })

  .state('appRate', {
    url: '/appRate',
    templateUrl: 'app/appRate/appRate.html',
    controller: "AppRateCtrl"
  })


  .state('barcodeScanner', {
    url: '/barcodeScanner',
    templateUrl: 'app/barcodeScanner/barcodeScanner.html',
    controller: "BarcodeScannerCtrl"
  })

  .state('batteryStatus', {
    url: '/batteryStatus',
    templateUrl: 'app/batteryStatus/batteryStatus.html',
    controller: "BatteryStatusCtrl"
  })

  .state('beacon', {
    url: '/beacon',
    templateUrl: 'app/beacon/beacon.html',
    controller: "BeaconCtrl"
  })

  .state('camera', {
    url: '/camera',
    templateUrl: 'app/camera/camera.html',
    controller: "CameraCtrl"
  })

  .state('clipboard', {
    url: '/clipboard',
    templateUrl: 'app/clipboard/clipboard.html',
    controller: "ClipboardCtrl"
  })

  .state('contacts', {
    url: '/contacts',
    templateUrl: 'app/contacts/contacts.html',
    controller: "ContactsCtrl"
  })


  .state('datePicker', {
    url: '/datePicker',
    templateUrl: 'app/datePicker/datePicker.html',
    controller: "DatePickerCtrl"
  })

  .state('device', {
    url: '/device',
    templateUrl: 'app/device/device.html',
    controller: "DeviceCtrl"
  })

  .state('deviceMotion', {
    url: '/deviceMotion',
    templateUrl: 'app/deviceMotion/deviceMotion.html',
    controller: "DeviceMotionCtrl"
  })


  .state('deviceOrientation', {
    url: '/deviceOrientation',
    templateUrl: 'app/deviceOrientation/deviceOrientation.html',
    controller: "DeviceOrientationCtrl"
  })

  .state('dialogs', {
    url: '/dialogs',
    templateUrl: 'app/dialogs/dialogs.html',
    controller: "DialogsCtrl"
  })

  .state('emailComposer', {
    url: '/emailComposer',
    templateUrl: 'app/emailComposer/emailComposer.html',
    controller: "EmailComposerCtrl"
  })

  .state('facebook', {
    url: '/facebook',
    templateUrl: 'app/facebook/facebook.html',
    controller: "FacebookCtrl"
  })

  .state('file', {
    url: '/file',
    templateUrl: 'app/file/file.html',
    controller: "FileCtrl"
  })

  .state('fileTransfer', {
    url: '/fileTransfer',
    templateUrl: 'app/fileTransfer/fileTransfer.html',
    controller: "FileTransferCtrl"
  })

  .state('fileOpener2', {
    url: '/fileOpener2',
    templateUrl: 'app/fileOpener2/fileOpener2.html',
    controller: "FileOpener2Ctrl"
  })

  .state('flashlight', {
    url: '/flashlight',
    templateUrl: 'app/flashlight/flashlight.html',
    controller: "FlashlightCtrl"
  })

  .state('geolocation', {
    url: '/geolocation',
    templateUrl: 'app/geolocation/geolocation.html',
    controller: "GeolocationCtrl"
  })

  .state('globalization', {
    url: '/global',
    templateUrl: 'app/globalization/globalization.html',
    controller: "GlobalizationCtrl"
  })

  .state('googleAnalytics', {
    url: '/googleAnalytics',
    templateUrl: 'app/googleAnalytics/googleAnalytics.html',
    controller: "GoogleAnalyticsCtrl"
  })

  .state('healthkit', {
    url: '/healthkit',
    templateUrl: 'app/healthkit/healthkit.html',
    controller: "HealthKitCtrl"
  })

  .state('inAppBrowser', {
    url: '/inAppBrowser',
    templateUrl: 'app/inAppBrowser/inAppBrowser.html',
    controller: "InAppBrowserCtrl"
  })

  .state('localNotification', {
    url: '/localNotification',
    templateUrl: 'app/localNotification/localNotification.html',
    controller: "LocalNotificationCtrl"
  })

  .state('media', {
    url: '/media',
    templateUrl: 'app/media/media.html',
    controller: "MediaCtrl"
  })

  .state('network', {
    url: '/network',
    templateUrl: 'app/network/network.html',
    controller: "NetworkCtrl"
  })

  .state('preferences', {
    url: '/preferences',
    templateUrl: 'app/preferences/preferences.html',
    controller: "PreferencesCtrl"
  })

  .state('printer', {
    url: '/printer',
    templateUrl: 'app/printer/printer.html',
    controller: "PrinterCtrl"
  })

  .state('pushNotifications', {
    url: '/pushNotifications',
    templateUrl: 'app/pushNotifications/pushNotifications.html',
    controller: "PushNotificationsCtrl"
  })

  .state('socialSharing', {
    url: '/socialSharing',
    templateUrl: 'app/socialSharing/socialSharing.html',
    controller: "SocialSharingCtrl"
  })

  .state('sqlite', {
    url: '/sqlite',
    templateUrl: 'app/sqlite/sqlite.html',
    controller: "SqliteCtrl"
  })


  .state('statusbar', {
    url: '/statusbar',
    templateUrl: 'app/statusbar/statusbar.html',
    controller: "StatusbarCtrl"
  })


  .state('toast', {
    url: '/toast',
    templateUrl: 'app/toast/toast.html',
    controller: "ToastCtrl"
  })

  .state('touchid', {
    url: '/touchid',
    templateUrl: 'app/touchid/touchid.html',
    controller: "TouchIDCtrl"
  })

  .state('vibration', {
    url: '/vibration',
    templateUrl: 'app/vibration/vibration.html',
    controller: "VibrationCtrl"
  })

  .state('upsPushNotifications', {
    url: '/upsPushNotifications',
    templateUrl: 'app/upsPushNotifications/pushNotifications.html',
    controller: "UpsPushNotificationsCtrl"
  });

$urlRouterProvider.otherwise('/menu');


$ionicConfigProvider.tabs.position('bottom'); // Set to bottom
});
</code></pre>

<p>What do you think is wrong with my code above? I would gladly appreciate any kind of help. Thanks!</p>