Hiding statusbar makes the controller not fire other functions

I’m developing a hybrid app using Phonegap and Ionic framework.

I have a login where the loginController works as intended but when I run the code to hide status bar as shown below, the status bar gets hidden, but the javascript functions don’t work anymore.

When I press login button, the whole page seems to flicker (refresh I guess) and nothing happens.

If I remove the code used to hide the status bar, the login functions work again.

What am I doing wrong? Please help.


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

.controller('LoginController', function ($scope, $state, $rootScope, AUTH_EVENTS, AuthService) {

            ionic.Platform.ready(function() {
                                 // hide the status bar using the StatusBar plugin
            $scope.credentials = {
            username: '',
            password: ''
            $scope.login = function (credentials) {
            AuthService.login(credentials).then(function (user) {
                                                }, function () {
                                                $scope.loginFlag = false;


<ion-view style="background-color:f2f2f3;" hide-back-button="false" >
    <nav-page hide-nav-bar="true">

    <ion-content  scroll="false" style="background-color:#f2f2f3;">
        <center style="position:relative;">
            <div id="logo" >
                <img src="img/fortunabank_logo.png" style="margin-top:40px;" class="img-responsive" width="150"/>

<div  class="box on fadein fadeout "ng-animate="'box'"  style="z-index:1"  >
    <div  class="container" ng-controller="LoginController">
        <form id="ftForm" name="form" autocomplete="off" novalidate shake-that  ng-submit="login(credentials)" novalidate>
            <div class="panel-body">
                <div class="form-group box-shadow" ng-class="{'has-error': form.name.$invalid && submitted}">
                    <input style="padding-left:5px;"
                        placeholder="User Name"
                        ng-model-options="{updateOn: 'blur'}"
                <div class="form-group box-shadow" ng-class="{'has-error': form.password.$invalid && submitted}">
                    <input style="padding-left:5px;"
            <div class="box-shadow" >
                <button  ng-disabled="loginFlag"type="submit" class="btn btn-primary btn-block" >Login</button>


do you get any error when hiding the statusbar like Statusbar is Undefined?

you could also put this inside the run method of your app:

angular.module('myApp', [ 'ionic',...]).run(function($ionicPlatform){
    $ionicPlatform.ready(function() {
         // hide the status bar using the StatusBar plugin

Yes, I do get Statusbar is Undefined error on my debug console.

I also tried hiding the statusbar inside the run method, but it doesn’t work.

How did you test this functionality on any kind of simulator like chrome/safari etc…?

So the problem is your Statusbar is not loaded yet, and because of this javascript stops to work in your case.

what you could do for testing:
add this to your index.html (dont forget to change to the right module):

<script type="text/javascript">
	document.addEventListener('deviceready', function onDeviceReady() {
		angular.bootstrap(document, ['myApp']);
	}, false);

and remove any ng-app form index!

this way your app will be started when all plugins are loaded. then try again to hide Statusbar.

I tested this using the xCode iOS Simulator as well as in Chrome browser.

I did add the code you posted here in the head of index.html as the last script before closing head tags, and removed the ng-app as you said, but it still doesn’t work.

Here’s my original index file.

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

    <link href="lib/other/css/toaster.css" rel="stylesheet">
    <link href="lib/other/css/ngProgress.css" rel="stylesheet">

      <!-- angularjs scripts  following are inside ionic bundle js -->
     <!-- <script src="lib/ionic/js/ionic.js"></script>
      <script src="lib/ionic/js/angular/angular.js"></script>
      <script src="lib/ionic/js/angular/angular-animate.js"></script>
      <script src="lib/ionic/js/angular/angular-sanitize.js"></script>
      <script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
      <script src="lib/ionic/js/ionic-angular.js"></script>-->

      <script src="lib/ionic/js/ionic.bundle.js"></script>
      <script src="lib/ionic/js/angular/angular-resource.js"></script>

      <script src="lib/other/js/toaster.js"></script>
      <script src="lib/other/js/ngProgress.min.js"></script>
      <script src="lib/other/js/bcrypt.js"></script>
      <script src="lib/other/js/jquery-1.11.1.min.js"></script>
      <!--<script src="lib/other/js/scrollView.js"></script>-->

    <link rel="stylesheet" href="font/itcavantgardestd-xlt.css">

       <!-- google maps javascript -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/loginCtrl.js"></script>
    <script src="js/account.js"></script>
    <script src="js/fundtransfer.js"></script>
    <script src="js/payments.js"></script>
    <script src="js/servicesCtrls.js"></script>
    <script type="text/javascript" src="cordova.js"></script>


  <body  ng-app="starter"  >



can you check window.plugin once the app fully loaded? (try on device or ios simulator on browser its not working)

there should be Statusbar in it if not then you did a mistake with adding statusbar to your App.

Double check in your Plugin directory if org.apache.cordova.statusbar is there, if not:

cordova plugin add org.apache.cordova.statusbar```

I usually use the bootstrapping just like @Auro said. don't forget to change the 'myApp' to your ng-app name!

I’m also running into this problem. I get the following error

ReferenceError: StatusBar is not defined

It does actually do what it’s supposed to do, my status bar goes away, but the error breaks my methods, so nothing fires. My app.js code looks

.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) {
  if(window.StatusBar) {
    // org.apache.cordova.statusbar required

Any ideas?

I’m having this same issue, and getting pretty frustrated. If I follow the instructions on how to remove the status bar here, I get the following error:

ReferenceError: StatusBar is not defined

If I try and use ngCordova, I more or less get the same problem:

TypeError: Cannot read property 'hide' of undefined    

What is most frustrating is that the status bar is hidden, it appears as if the plugin is working when testing in the browser, but not in iOS. When I try and log in it flickers and fails. I’ve tried the suggestions in this thread to no avail and wondering if others in the discussion figured it out? Here is my js:


        .controller('LogInCtrl', function ($scope, $timeout, $rootScope, $state, Auth,
                                            $cordovaStatusbar) {
            ionic.Platform.ready(function() {
                // hide the status bar using the StatusBar plugin

index.html head

<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet">

<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-devise/lib/devise-min.js"></script>
<script src="lib/ng-file-upload/angular-file-upload.js"></script>
<script src="lib/ng-file-upload-shim/angular-file-upload-shim.js"></script>
<script src="../plugins/org.apache.cordova.statusbar/www/statusbar.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>

<!-- Services -->
<script src="js/services/authinterceptor.js"></script>
<script src="js/services/profile.js"></script>
<script src="js/services/user.js"></script>
<script src="js/services/community.js"></script>
<script src="js/services/communitytype.js"></script>
<script src="js/services/communityuser.js"></script>
<script src="js/services/friend.js"></script>
<script src="js/services/notification.js"></script>
<script src="js/services/post.js"></script>
<script src="js/services/post_reaction.js"></script>
<script src="js/services/report.js"></script>

<!-- Controllers -->
<script src="js/controllers/log_in.js"></script>
<script src="js/controllers/home.js"></script>
<script src="js/controllers/resources.js"></script>
<script src="js/controllers/profile.js"></script>
<script src="js/controllers/create_profile.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/communities.js"></script>
<script src="js/controllers/notifications.js"></script>
<script src="js/controllers/additional_menu.js"></script>
<script src="js/controllers/community_type.js"></script>
<script src="js/controllers/community_home.js"></script>
<script src="js/controllers/post.js"></script>

Any help would be amazing, and thanks for the great framework! I have loved it so far.