EmberJS: Render default template

I am trying to build an Ember Application which I want to render a default template of the nested route into the index route. Here is the router.js

export default Router.map(function() {
  this.route('posts', function() {
    this.route('featured');
    this.route('authors');
    this.route('popular');
  });
});

Here is the posts-index.hbs template:

<div class="posts">
  <h2>Welcome to your blog posts</h2>
  <p>Here are your posts:</p>
  <ul>
    <li>{{#link-to 'posts.featured'}}Featured{{/link-to}}</li>
    <li>{{#link-to 'posts.authors'}}Authors{{/link-to}}</li>
    <li>{{#link-to 'posts.popular'}}Popular{{/link-to}}</li>
  </ul>
  <div class="posts-container">
    {{outlet}}
  </div>
</div>

Here is the posts-index/featured.hbs template:

<div class="featured-posts">
  <h3>List of featured posts</h3>
  <p>...</p>
</div>

Other templates are the same as the featured template.

As you can see in the application above, I want when user visits the /posts, they will see the posts-index template, as well as the posts/featured.hbs template being rendered as default. Of course, user can still navigate to url /posts/featured, and seeing the same content.

Any suggestions to this are appreciated. Thanks!