CanJS Live Binding with lazy load of Components Not working

Question

I'm using headJs to lazy load scripts. For simplicity lets say I have 3 components, layout-component(tag : custom-layout), custom1-component(tag : custom-one) and custom2-component(tag : custom-two).

index.html

<button class="one">One</button>
<button class="two">Two</button>
{{#is layout 'user'}}
    <custom-layout page="{state.page}"></custom-layout>
{{/is}}

app.js

var state = new can.Map.extend({page : '', layout: 'user'})
// on some action I can set the page to 'one' or 'two, like so
$('button').on('click', function(e){
    if ($(e.target).hasClass('one')) {
        head.load(['custom1-component.js'], function(){
            state.attr('page', 'one')
        })
    }
    else if ($(e.target).hasClass('two')) {
        head.load(['custom2-component.js'], function(){
            state.attr('page', 'two')
        })
    }
})

layout-component.js

can.Component.extent({
    tag : 'custom-layout',
    tempate : can.view('custom-layout.stache')
})

custom-layout.stache

{{#is page 'one'}}
    <custom-one></custom-one>
{{/is}}
{{#is page 'two'}}
    <custom-two></custom-two>
{{/is}}

So initially I have set the layout to 'user' for simplicity. On Load the custom-layout is already fetched and stache executed. However at this point there are no custom-one or custom-two components loaded. On click of the button, I load the component defs and change the page value appropriately. The problem is that the custom-one and custom-two are recognised as can component and do not render.