How can I generate title dynamically on ionic framework?

Problem

I use ionic pet template. I have a question about pet-detail page, if I would like to have a dynamic title on header, it will not show anything until I reload the page (using web browser), but I think it doesn't make sense since I would like to make an app. Does I miss anything? what can I do?

here is my code as below:

<ion-nav-bar class="bar-positive">
<div class="buttons" ng-controller="BackCtrl">
    <a class="button button-icon icon ion-chevron-left" ng-click="$back()"></a>
</div>
<h1 class="title"> {{ current_pet.name }} </h1>

..

Problem courtesy of: GaGa

Solution

In my app I've used this:

<ion-view title="{{Properties.Title}}">

Where Properties is a object on my scope(I have sort of a master controller) where I "override" on each "inner controller".

Solution courtesy of: Amir Popovich

Discussion

If you are using and you want to show a button in the header bar only when an input/textarea is filled (not empty), then you can do the following.

<ion-header-bar class="bar-light">
  <h1 class="title">{{$root.Title}}</h1>
  <div class="buttons">
    <button class="button button-clear icon ion-checkmark-round" ng-click="" ng-if="$root.Title"></button>
  </div>
</ion-header-bar>

and inside "ion-content" -

<div class="row>
  <textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>

Otherwise just using ng-if="Title" in the header bar will not work.

Discussion courtesy of: adarshmuthappa

If you happen to be using ion-view, use this:

<ion-nav-title>
    {{ PageTitle }}
</ion-nav-title>

And put it outside your ion-content.

Discussion courtesy of: dk123

This recipe can be found in it's original form on Stack Over Flow.