How do I change the top bar text color to white in my Ionic App?

I changed the header to a darker color using this:

<ion-nav-bar class="bar-royal">

When I run it on ios, the status bar text (time, carrier, battery, etc) at the top is black and difficult to see on the dark background. How do I make this text white?

Black text on dark header color

With the plugin statusbar and ngCordova is pretty simple:

var app = angular.module('ionicApp', ['ionic', 'ngCordova'])

app.run(function($cordovaStatusbar) {
  $cordovaStatusbar.overlaysWebView(true)

  $cordovaStatusBar.style(1) //Light
  $cordovaStatusBar.style(2) //Black, transulcent
  $cordovaStatusBar.style(3) //Black, opaque
});

Take a look to the full article here: http://learn.ionicframework.com/formulas/customizing-the-status-bar/

UPDATE - Without ngCordova:

Default Ionic project comes with the statusbar plugin installed. If you have this statement inside you run probably your project already have:

if(window.StatusBar) {
  StatusBar.styleDefault();
}

So the code become:

var app = angular.module('ionicApp', ['ionic'])

app.run(function() {
    if(window.StatusBar) {
      StatusBar.overlaysWebView(true);
      StatusBar.style(1) //Light
      StatusBar.style(2) //Black, transulcent
      StatusBar.style(3) //Black, opaque
    }
});