After starting to learn Ionic with AngularJS, I encountered an issue with the title not appearing on the screen. Despite being in the code, it does not show up when running on localhost or mobile. The navbar displays properly with the specific template, but the title is missing. Any help would be appreciated. Apologies for any poorly embedded codes.
angular.module("veganApp", ["ionic"])
.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) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "app/home/home.html"
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
<!-- begin snippet: js hide: false -->
<ion-nav-bar class="bar-balanced">
<h1 class="title">Meal Plan</h1>
</ion-nav-bar>
<ion-tabs class="tabs-balanced tabs-icon-top">
<ion-tab title="Meal Plan" icon="ion-ios-list-outline" href="#">
<ion-view></ion-view>
</ion-tab>
<ion-tab title="Shopping List" icon="ion-ios-cart-outline" href="#">
<ion-view></ion-view>
</ion-tab>
</ion-tabs>