Ember nested component action

I have looked through all the answers and google results I could find about it and all I got out of it is that it is quite a common problem. Unfortunately non helped me to solve my case.

I have this custom button:

App.ButtonCmpComponent = Ember.Component.extend({

    tagName: 'button',

    classNameBindings: ['btn', 'class'],
    btn: 'btn',
    class: 'btn-default',

    attributeBindings: ['type'],
    type: 'button',

    click : function () {
        this.sendAction();
    }
});

As well as a button group component:

App.SelectGroupCmpComponent = Ember.Component.extend({

});

With this template:

{{#each btn in definition}}
    {{button-cmp action=btn.action}}
{{/each}}

In my index controller I have the following:

App.IndexController = Ember.ObjectController.extend({

    actions: {

        test : function () {
            alert('test in index controller')
        }
    }
});

And index view defined the content via a simple hash:

App.IndexView = Ember.View.extend({
    templateName: 'views/index',

    buttonGroup : [
        { label : "Test Action", action : 'test' },
        { label : 'Other Btn', action : 'test' }
    ]
});

And finally in index view:

{{button-cmp action="test"}}

{{btn-group-cmp definition=view.buttonGroup}}

My problem is that the first button defined directly on the view does trigger correct action in index controller but the two buttons inside button group controller do now. In fact I can't even identify the target where those actions are being sent to from within the nest component at all.

What am I doing wrong here? How can I define a nested button component in such a way that it would still send the action to the same index controller handler?

Thank you