Ionic - error in hiding statusbar on iOS

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.

JS

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
                                 StatusBar.hide();
                                 });


            $scope.credentials = {
            username: '',
            password: ''
            };
            $scope.login = function (credentials) {
            $scope.loginFlag=true;
            AuthService.login(credentials).then(function (user) {
                                                console.log("vame"+user);
                                                $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
                                                 console.log('loginSuccess');
                                                //$scope.setCurrentUser(user);

                                                $state.go('app.playlists');

                                                }, function () {
                                                $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
                                                console.log('loginFailed');
                                                $scope.loginFlag = false;


                                                });
            };

                })
;

HTML

<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>





<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;"
                        type="text"
                        class="form-control"
                        id="username"
                        name="username"
                        placeholder="User Name"
                        ng-model="credentials.username"
                        ng-model-options="{updateOn: 'blur'}"
                        required>
                        </div>
                <div class="form-group box-shadow" ng-class="{'has-error': form.password.$invalid && submitted}">

                    <input style="padding-left:5px;"
                        type="password"
                        class="form-control"
                        id="password"
                        name="password"
                        placeholder="Password"
                        ng-model="credentials.password"
                        required>
                        </div>


            </div>



            <div class="box-shadow" >


                <button  ng-disabled="loginFlag"type="submit" class="btn btn-primary btn-block" >Login</button>

            </div>
        </form>


    </div>


</div>
</center>

</ion-content>
</ion-view>