Missing title in Ionic ion-view

Question

For some reason I cannot get the Ionic title to show up: http://codepen.io/hawkphil/pen/oXqgrZ?editors=101

This code is not exactly 100% following Ionic example but I don't want to add 2 layers of state ( / and /somethingelse ) just to do a simple page including top and bottom.

HTML

  <ion-nav-bar class="bar-balanced">
    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-buttons side="right">
      <button class="button button-clear">
        OK
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-view view-title="{{ title }}">
    <ion-content class=" has-header">
      test test
      </<ion-content>
  </ion-view>

JS

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  $scope.title = '<b>BOLD TITLE</b>';
});

Is there a way to fix this? I need a way to show dynamic title with HTML.

Answer 1

Your <ion-view> should be inside a <ion-nav-view> which is a part of ui-router as stated in the docs . You have to set up some basic routing for the dynamic header to be updated.

I've customized your codepen here

Answer 2

As you want to show view directly, independent of routing by ui-router ,then it should be ion-nav-view instead of ion-nav & then for changing nav header ion-header-bar , & then for binding HTML on the ion title you could use the answer suggest by @shushanthp.

Code

<ion-nav-view view-title="{{ title }}">
  <ion-header-bar align-title="left" class="bar-balanced bar">
    <span ng-bind-html="title"></span>
  </ion-header-bar>
  <ion-content class=" has-header">
    test test
  </<ion-content>
</ion-nav-view>

Forked Codepen