How to give responsive title in ion-header-bar in ionic framework based on selected page?

Question

In header bar I need title to change dynamically according to current page app is on. It can be achieved using ion-nav-bar but I also need my custom controls on bar along with fixed header bar for all pages.

So in {{pageTitle}} variable is used for title attribute in header bar, I want to know where and how or in which controller can I create and update this variable, so change is reflected whenever page is navigated?

 <ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()">Left Button</button> </div> <h1 class="title">{{pageTitle}}</h1> <div class="buttons"> <button class="button">Right Button</button> </div> </ion-header-bar> <ion-content> Some content! </ion-content> 

Answer 1

You can define variable pageTitle in $rootScope :

angular.module('your_app_name', [])
.run(funtion($rootScope) {
  $rootScope.pageTitle = 'Something initial';
});

and change $rootScope.pageTitle in template's controller whenever you need change page title:

angular.module('your_app_name')
.controller('SomeCtrl', function($rootScope) {
  $rootScope.pageTitle = 'Another Title';
});