Unable to change $cordovaStatusbar text color

Question

I'm having issues with the status bar of my Ionic app. More specifically I'm not able to change the bar default color, no matter what style I apply.

I already checked ngCordova and the cordovaStatusbar plugin are already installed correctly.

CODE SNIPPET

app.run(function ($ionicPlatform, $cordovaStatusbar) {

  $ionicPlatform.ready(function () {

        // Color the iOS status bar 
        if (window.StatusBar) {
            $cordovaStatusbar.overlaysWebView(true);
            $cordovaStatusbar.styleHex('#f50'); 
        }
    });
});

This is the result I get in xCode simulator with ionic emulate ios command.

EDIT:

After many tests I think the problem is more in depth. Neither .show() or .hide() methods are working.

app.run(function ($ionicPlatform, $cordovaStatusbar) {

  $ionicPlatform.ready(function () {

        $cordovaStatusbar.hide(); //not hiding the status bar
    });
});

Answer 1

From the plugin github page

On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB).

So I got this working by doing the following:

1. Making sure ngCordova is installed

2. Set OverlaysWebView to false and set the color.

   if(window.StatusBar) {
      $cordovaStatusbar.overlaysWebView(false);
      $cordovaStatusbar.styleHex('#FF0000') //red
   }