Ember: Dynamically created component actions don't fire

I'm having trouble with {{actions}} on Ember (1.11.0) components not being triggered when the component has been added to the page dynamically. Oddly enough, it seems to be related to how the ember application has been added to the page - via the default template vs. added to a "rootElement".

Working JSBin: actions are triggered

Non-Working JSBin: actions aren't triggered

My Component Definition:

<script type="text/x-handlebars" data-template-name="components/foo-bar">
    <p>Component {{name}}</p>
    <button {{action "doIt"}}>Do It</button>  
</script>

App.FooBarComponent = Ember.Component.extend({
    click: function() {
        console.log('click fired! - ' + this.get('name'));
    },
    actions: {
        doIt: function() {
            console.log('doIt fired! - ' + this.get('name'));
        } 
    }
});

The click() event and doIt() action aren't triggered when the component has been added to the page dynamically. I'm using append() method to add the component to the page:

App.IndexController = Ember.Controller.extend({
    count : 1,
    actions: {
        createNewFoobBar: function() {
            this.set('count', this.get('count') + 1);
            var comp = this.container.lookup('component:foo-bar');
            comp.set('name', this.get('count'));
            comp.set('controller', this);
            comp.append();
        }
    }
});

In either case, actions are properly triggered when the component is part of the template:

{{foo-bar name="one"}}