EmberJS Second level of service are not injected when calling from template

When calling a service function from a template e.g. onClick=, the services which should be injected into myFirstLevel stay undefined.

The call through a component action is working.

<button onClick=>Hello Service</button>
<button onClick=>Hello Action</button>


App = Ember.Application.create();

App.MyFirstLevelService = Ember.Service.extend({
  mySecondLevel: Ember.inject.service(),
  hello: function() {
    console.log('Hello first level');
    this.get('mySecondLevel').hello();
  }
});

App.MySecondLevelService = Ember.Service.extend({
  hello: function() {
    console.log('Hello second level');
  }
});

App.MyButtonComponent = Ember.Component.extend({
  myFirstLevel: Ember.inject.service(),

  actions: {
    hello:  function() {
      this.get('myFirstLevel').hello();
    }
  }
});

http://ift.tt/2cwwlfi