ionic - unable to print title on navbar - angularjs

Question

I am working with angular and ionic and i'm currently not able to print ANY title in the navbar.
I have a quite complex setup with multiple nested views.
Here's the list of states:
state('app', {
cache: false,
url: '/app',
abstract: true,
templateUrl: './sections/menu/menu.tpl.html',
controller: 'menuCtrl'
}).state('app.home', {
url: '/home',
views: {
'appContent': {
templateUrl: './sections/menu/pageViewsContainer.tpl.html',
controller: 'homeCTRL'
},
'Details#app.home': {
templateUrl: './sections/home/home.tpl.html'
},
'List#app.home': {
templateUrl: './sections/List/List.tpl.html'
}
}
}).state('app.details', {
name: 'appDetails',
url: '/:ID',
views: {
'appContent': {
templateUrl: './sections/menu/pageViewsContainer.tpl.html',
controller: 'DetailsCtrl'
},
'zoneDetails#app.details': {
templateUrl: './sections/Details/Details/details.tpl.html'
},
'zoneList#app.details': {
templateUrl: './sections/List/List.tpl.html'
}
}
});
My main (abstract) state is app and uses menu.tpl.html which looks like this:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content class="custom-central-content">
<ion-nav-bar class="bar-calm custom-header-bar">
<ion-nav-buttons side="left">
<!--<button class="button button-icon button-clear ion-home" menu-toggle="left"></button>-->
<button class="button button-icon button-clear ion-home" ui-sref="app.myHouse" id="AppMenuLeftIcon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right" id="AppMenuRightIcon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-view ui-view="appContent"></ion-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
.....
inside <ion-view ui-view="appContent"></ion-view> I am using the template from pageViewsContainer.tpl.html which is:
<ion-view>
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
and then inside both Details and List I am printing the two views I need.
The problem is that I need to be able to set a static title for the main (home) page, but then dynamically change it when I go inside Details with the name of the page from my scope.
The problem is that I am not able to print ANY title (plain text, not scope) in any way.
I tried with (in pageViewsContainer.tpl.html):
<ion-view>
<ion-nav-title>View 1</ion-nav-title>
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
<ion-view view-title="View 1">
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
as well as (inside details template):
<ion-view>
<ion-nav-title>View 1</ion-nav-title>
<ion-content class="has-footer has-header">
...
<ion-view view-title="View 1">
<ion-content class="has-footer has-header">
...
But nothing worked.
Suggestions?

Answer 1

Try adding the title command inside header-bar
<ion-view>
<ion-header-bar class="bar-stable">
<h1 class="title">View 1</h1>
</ion-header-bar>
<ion-view>
or try
<ion-view>
<div class="bar bar-header browse-header" align-title="center">
<h1 class="title">View 1</h1>
</div>
<ion-content class="has-header">
</ion-content>
</ion-view>

Answer 2

It turned out I had to change quite a bit on my navigation, as I was using the nested views, parent, childs in a completely wrong way. It's working fine now.
Also, if, for some reasons, the title navbar it's still not displayed, you can force it using this in the controller (coffeescript):
# This should show the navabar everytime the view is entered
$scope.$on '$ionicView.enter', () ->
$ionicNavBarDelegate.showBar true