ember nested route not loading

Just trying to determine how to do this. For an image sharing site I have the following requirement.

1. User is able to view an image
2. User is able to comment on the image
3. User is able to see comments from users friends on the image

this is my router.js:

  this.resource('image', function(){
    this.route('index', {path:'/:image_id'});
    this.route('comments', {path:'/:title_id/comments'});
  });

template/image/index.hbs:

<div class="container">
            {{partial "image/actualimage"}}

    <div class="row">
            {{partial "image/comments"}}
    </div>
</div>

route/image/index.js:

model: function(params) {
    return this.store.find('image', params.image_id);
}

route/image/comments.js:

model: function() {
    return this.store.find('comment');
}

So when I goto the URL /image/image_id, the template/image/index.hbs will be displayed, which contains {{partial "image/comments"}} and I want to partial to load comments using route/image/comments.js. However currently that image/comment route is never triggered.