ember.js - IndexRoute の Controller.set

Question

次のjsコードがあります：

App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Router.map(function() {
    this.resource('posts');
    this.resource('about');
});

App.IndexRoute = Ember.Route.extend({
     setupController: function(controller) {
         controller.set('title', "test");
     }
});

App.PostsRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('title', 'test');
    }
});

そして次のhtmlページ：

<script type="text/x-handlebars">
    <div class="container">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li>{{#linkTo index}}Home{{/linkTo}}</li>
                    <li>{{#linkTo posts}}Posts{{/linkTo}}</li>
                    <li>{{#linkTo about}}About{{/linkTo}}</li>
                </ul>
            </div>
        </div>
        {{title}} // <--- no title here
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="about">
    About template
</script>

<script type="text/x-handlebars" id="posts">
    <h1>{{title}}</h1> // <--- works here
    Recent posts
</script>

投稿ルートでのみ {{title}} 変数をレンダリングしました。ただし、インデックスルートでは機能しません。私はマニュアルを読んでいて、そこに記載されているとおりに実行しようとしました: http://emberjs.com/guides/routing/defining-your-routes/