Data not shown when directly accessing a URL in nested Ember Route

I have a nested route setup as I would like to have my templates nested as well. The route setup looks like this:

...

      this.route('posts', function() {
        this.route('post', {path: ':post_id'}, function() {
          this.route('comments',  {path: 'comment'}, function() {
            this.route('comment',  {path: ':comment_id'});
          });
        });
      });

...

Potentially, my URL could look something like this: /posts/:post_id/comments/:comment_id

If I navigate via then I have no problem, however, if I go directly to a specific URL via the browser, that's when things going wrong. Imagine that my comments page lists the comments associated with the post (post_id) I'm looking at. The problem is going there directly, like typing in /posts/123/comments/56 doesn't load the list of comments, only the comment itself. Here is how my routes are setup:

// routes/posts.js
...
model() {
    return this.get('store').findAll('post');
}
...

// routes/posts/post.js
...
model(params) {
    return this.get('store').findRecord('post', params.post_id);
}
...

// routes/posts/post/comments.js
...
model(params) {
    let post=this.modelFor('posts/post');
    return post.get('comments');

}
...

// routes/posts/post/comments/comment.js
...
model(params) {
    let post=this.modelFor('posts/post');

    return post.get('comments').then(function(results){
        return results.store.findRecord('comment', params.comment_id);
    });
}
...

If I type in /posts/123/comments/56, no list is displayed from the comments.js template.

If I type in /posts/123/comments, only the first comment is displayed from the comments.js.

I'm not sure what I'm doing wrong though I feel like it has something to do with modelFor. How do I properly populate/hydrate the post's comments list when I go directly to a comment in that post URL rather than navigating there via link-to?