Ionic blank template hide the accessory bar by default not working

Hi I started a blank ionic project. In the app.js file there is this code:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['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.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

From what I understand the code above does do two things. It hides the accessory bar above your keyboard. And it set's your status bar style to the default style.

It looks like that both doesn't seem to work. When I test my app it the ionic view app the accessory bar is still there.

And when I change the part of the statusbar style code from

StatusBar.styleDefault();

to

StatusBar.overlaysWebView(true); StatusBar.styleLightContent();

The status bar is still the default style (dark), I would like to have the light style status bar.

Am I doing something wrong, am I missing something or do I understand the code above wrong.

Thanks!!

config.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.testapp582099" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>test_app</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

It should work once you add the plugin:

$ cordova plugin add org.apache.cordova.statusbar

For some reason, the plugin isn't automatically installed on the Ionic starter projects, even though it's used in the code. More info: http://learn.ionicframework.com/formulas/customizing-the-status-bar/

To get this working in Ionic View, you might have to do a bit more.

  • Install ngCordova: http://ngcordova.com/docs/install/. Make sure ng-cordova.js lives between angular.js and cordova.js. This isn't bad to have anyways, in case you want to use more ngCordova plugins.
  • Inject as an Angular dependency angular.module('myApp', ['ngCordova'])
  • Run $ cordova plugin add cordova-plugin-statusbar. Feel free to remove the plugin above first (they may or may not be the same...).
  • Inject $cordovaStatusbar into your .run block (you can also inject into Controllers, etc. if you want).
  • Use as before, but like so: $cordovaStatusbar.hide().
  • If your code is in $ionicPlatform.ready, it might not work as expected in Ionic View (see: https://github.com/driftyco/ionic-view-issues/issues/52). To get it working, either wrap it in $timeout, or

    So if you aren't adverse to a small hack, adding <script>window.phonegap = {}</script> to your <head> before Ionic loads should force it to wait for the deviceready event without stepping on Cordova's toes once it does load. Much simpler than writing $timeout everywhere.