How to add back-button and change title of ion-header-bar in template?

I’m looking for any way to add back-button and change title of ion-header-bar in templates. I have some templates and when I open any template I want to change title and and add back-button. I’m trying add the tag ion-header-bar inside a template, but it are ignored when show the template.

How could I do this ?

My templates are: login.html and add.html


<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

    <!-- controllers -->
    <script src="js/controllers/MainCtrl.js"></script>


  <body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

      <ion-header-bar class="bar-stable">
        <h1 class="title">First Page</h1>


template login.html


  <ion-header-bar align-title="left" class="bar-positive">
    <div class="buttons">
      <button class="button">Left Button</button>
    <h1 class="title">Login</h1>    

      <div class="list list-inset">
            <label class="item item-input">
                <input type="text" placeholder="Username" ng-model="data.username">
            <label class="item item-input">
                <input type="password" placeholder="Password" ng-model="data.password">
      <button class="button button-block button-energized" ng-click="login()">Login</button>

If you want to automatically add a back button use ion-nav-bar instead of ion-header-bar

put your content in ion-nav-view and ion-view --> so your base layout looks like this:

After that you can set the title in your ion-view like this:

There are two other directives to change the navbar within an ion-view:


@bengtler thanks a lot !