Hiding parent router in Ember

I'm trying to show only parent data on the main page, then render parent & child data on the next page. I can show parent data on the second page, but I've been unsuccessful in successfully rendering child data into that page.

I've been using outlets to make sure that all my models & controllers work the same.

I'm trying to show the content of lists/show.js on todo.js:

export default Router.map(function() {
  this.resource('lists', {path: '/'}, function() {
    this.route('show', {path: 'lists/:list_id'} );
  });
  this.route('todo', {path: 'todos/:todo_id'} );
});

Todo.hbs:

import Ember from 'ember';

export default Ember.Route.extend({
    {{outlet 'lists.show'}}

    {{outlet "todos"}}
});

Todo.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params){
    // return model
  },
  renderTemplate: function(controller) {
    this.render('lists.show', {controller: controller});
//    this.render('todos', {controller: 'todo'});
    this.render('todos', {
            into: 'todo',
            outlet: 'todos',
        });
  }
});

lists/show.hbs:

<div class="row">
    <div class="small-12 columns">
        {{#if isEditing}}
            {{edit-title type="text" value=model.title focus-out="updateTitle" insert-newline="updateTitle"}}
        {{else}}
            <h4>{{model.title}}</h4>
        {{/if}}
    </div>
</div>


<div class="row">
    <div class="small-12 columns">
        <a href="#" {{action "editTitle"}}>{{fa-icon "pencil"}}</a>
        <a href="#" {{action "deleteList"}}>{{fa-icon "remove"}}</a>
    </div>
</div>


<div class="row">
    <div class="small-12 columns">
        {{outlet "todos"}}
    </div>
</div>

lists.hbs:

<div class="row">

    <div class="small-6 columns">
        <div class="row">
            <div class="small-5">
                {{input type="text" value=newListTitle action="createList" placeholder="Create a Stack"}}

                <h4>Discover stacks at work</h4>
            </div>
        </div>

        <div class="row">
            <div class="small-12">
                <ul>
                    {{#each list in model}}
                        <li>{{#link-to "todo" list}}{{list.title}}{{/link-to}}</li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>

    <!--div class="small-6 columns">
        {{outlet}}
    </div-->

</div>

I think I must be using outlets wrong, seeing that {{outlet "todos"}} isn't working on todo.js.

I'd appreciate if you could help point in the right direction!

Edit

Actually, now I got both showing on the second page (rendered 'todos' into 'lists.show' instead of 'todo', but the todo controller hasn't followed through the outlet.