Missing title in Ionic ion-view

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.

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

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

with Angular 1.2+ version , you can use $sce refer :https://docs.angularjs.org/api/ng/service/$sce

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

and in the template u can use ng-bind-html

If your expressions are constant literals, they're automatically trusted and you don't need to call $sce.trustAs on them (remember to include the ngSanitize module) 

     (e.g. <div ng-bind-html="'<b>implicitly trusted</b>'"></div>) just works.

with Angular 1.2 you can use 

      <div ng-bind-html="expression"></div>
or
      <div ng-bind-html-unsafe="expression"></div>