View-title not working in element directive body

Consider the following:

.state("root", {
	abstract: true,
	template: "<ion-nav-bar></ion-nav-bar><ion-nav-view name='root'></ion-nav-view>"
.state("root.child", {
	url: "/child",
	views: {
		"root": {
			template: "<child-state></child-state>"

Where the contents of “<child-state></child-state>” is:

<ion-view view-title="MY TITLE">
		<span>HELLO WORLD</span>

Give this setup, view-title="MY TITLE" doesn’t work and the <ion-nav-bar></ion-nav-bar> on the root state does not get affected. However if I change the template of root.child to the following, it works:

template: "<ion-view view-title='MY TITLE'><child-state></child-state></ion-view>"

I have even tried setting replace: true on the <child-state></child-state> and the view-title still didn’t work.

Why wouldn’t the view-title be set in my original setup?