Propagate action from nested component to AppController

I have a component nested several levels down in other components. I'm trying to propagate an action all the way up to the AppController in order to open a modal.

The only way I know of doing this is to pass in the action to each component - but this seems extremely impractical. Is there a better way to access the AppController from a nested component?

See my jsbin for the code

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.AppController = Ember.Controller.extend({
    actions: {
        openModal: function(){
            alert('this would open the modal')
        }
    }
})

App.MainComponentComponent = Ember.Component.extend({})

App.SubComponentComponent = Ember.Component.extend({
    actions: {
        triggerModal: function(){
            // need to trigger the openModal action on the AppController
            this.sendAction('openModal')

        }
    }
})

.

<script type="text/x-handlebars" data-template-name="index">
  <h1>Index</h1>

{{main-component model=model}}
</script>

<script type="text/x-handlebars" data-template-name="components/main-component">
  <h2>Main component</h2>

{{#each color in model}}
    {{sub-component color=color}}
{{/each}}
</script>   

<script type="text/x-handlebars" data-template-name="components/sub-component">
  <button {{action "triggerModal"}}>{{color}}</button>
</script>

EDIT: I'm aware that I can render a template into the modal outlet:

this.render(modalName, {
  into: 'application',
  outlet: 'modal'
});

But I'm trying to access an action on the AppController.