How to remove the space at the top of Ionic Webview on iOS?

It's my first time of my development with Ionic.

I have tried to remove the status bar in my application. Now, the status bar of the iPad Application was removed. However, there is still a space at the top of my Iconic view (which I think the size is as same as status bar). I have already set the Javascript file using this code for hiding the status bar, but it's not working.

ionic.Platform.ready(function() {
// hide the status bar using the StatusBar plugin
StatusBar.hide();
// ionic.platform.fullScreen();

});

How can I solve this problem or did I do something wrong? Thank you.

Here is the images comparing between on the web browser and iOS simulator

I had the same problem. I used:

ionic.Platform.ready(function() {
  //hide the status bar using the StatusBar plugin
  if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.hide();
    ionic.Platform.fullScreen();
  }
});

The ionic.Platform.fullScreen(); was the thing from my project. That removes the space at the top.

Have you install statusbar plugin like this:

$ cordova plugin add org.apache.cordova.statusbar

Only after that, you can remove the status bar:

angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  ionic.Platform.ready(function() {
    // hide the status bar using the StatusBar plugin
    StatusBar.hide();
  });
});