Ember controller property in route handler. Why do I need to list a the controller to be the application controller here?

I read this

This is my ember application

This is my rails API

You can git clone them both and have the rails API running while Ember consumes it.

cd bookstore-client $ ember server --proxy http://localhost:3000

cd bookstore-api $ bin/rails server --binding 0.0.0.0

When you go to the root route localhost:4200/, you see the application.hbs and the books.hbs template loaded into the application.hbs' outlet. When you click a book which triggers an action called 'openCheckoutModal', the books.hbs goes opaque because a class is being added. However, (this helps me understand what is going on), when I take away the controller from the books.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('book');
  },

  actions: {
    openCheckoutModal(book) {
      this.controllerFor('application').set('showingModal', true);
      return this.render('modal', {
        outlet: 'modal',
        into: 'application',
        model: book
      });
    },

    closeCheckoutModal() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

The books.hbs goes blank after I click on a book trigger an action and the modal. Why is this? What is going on?

If I include the controller:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('book');
  },

  actions: {
    openCheckoutModal(book) {
      this.controllerFor('application').set('showingModal', true);
      return this.render('modal', {
        outlet: 'modal',
        into: 'application',
        model: book,
        controller: 'application'
      });
    },

    closeCheckoutModal() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

Everything is fine and the books in the backgroudn go opaque and when I close the modal, I see the collection of books again. What is going on? Why do I need to add the controller property?

This is my books.hbs btw:

<ul>
  {{#each model as |book|}}
  <a href="#" {{action 'openCheckoutModal' book}}>
    <li>
      <strong>{{book.title}}</strong><br><br>
      <em>by</em>
      {{book.author.name}}
    </li>
  </a>
  {{/each}}
</ul>

and my application.hbs:

<h2 id="title">
  {{#link-to 'books'}}Our Awesome Bookstore{{/link-to}}
</h2>

<div class="{{if showingModal 'background' ''}}">
  {{outlet}}
</div>

{{outlet 'modal'}}