Tab is neither on top nor on bottom

Has anyone experienced their tabs not being on top nor at the bottom of screen? This is my index.html body:

<body ng-app="myApp">
    <p>Hello, your application is ready!</p>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>

    <ion-tabs class="tabs-positive tabs-top">
        <ion-tab icon="ion-ios-home">
            <ion-content>
                a<br/>a<br />a<br />a<br />a<br />a<br />a<br />a<br />
            </ion-content>
        </ion-tab>
        <ion-tab icon="ion-ios-keypad">
            <ion-content>
                b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />
            </ion-content>
        </ion-tab>
    </ion-tabs>
</body>

This is my index.js file:

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
})();

var app = angular.module('myApp', ['ionic']);
app.config(['$ionicConfigProvider', function ($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
}]);

Content of tabs are okay. it’s just the tab’s position. Help pls?