Set component property via dependency injection

I injected modal dependency in another nested component. I'm trying to set a property on the modal component from the nested component but it's not working.

Ember.Application.initializer({
  name: 'modal',

  initialize: function(container, application) {
    application.register('modal:main', App.MyModalComponent, { 
      singleton: true
    });

    application.inject('component:sub-component', 'modal', 'modal:main');
  }
});
App.SubComponentComponent = Ember.Component.extend({
    actions: {
        triggerModal: function(color){
            // trying to trigger the `setData` function on MyModalComponent
            this.modal.setData(color)
        }
    }
})

App.MyModalComponent = Ember.Component.extend({
    color: null,

    // trying to get this to trigger via SubComponent
    setData: function(color){
        this.set('showModal', true)
        this.set('color', color)
    },

})

See my jsbin for code

Am I misunderstanding the role of dependency injections? Or improperly using it?