Two ember applications in the same page

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name='app1-view'>
    I am the App1 main view
</script>
<script type="text/x-handlebars" data-template-name='app2-view'>
    I am the App2 main view
</script>

<div id="app1">
    App1 here...
</div>

<div id="app2">
    App2 there...
</div>

JavaScript

App1 = Ember.Application.create({
    rootElement: '#app1'
});

App1.ApplicationController = Ember.Controller.extend();
App1.ApplicationView = Ember.View.extend({
    templateName: 'app1-view'
})

App1.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            path: '/FMV8u/38/'
        })
    })
});

App1.initialize();



App2 = Ember.Application.create({
    rootElement: '#app2'
});

App2.ApplicationController = Ember.Controller.extend();
App2.ApplicationView = Ember.View.extend({
    templateName: 'app2-view'
})

App2.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            path: '/FMV8u/38/'
        })
    })
});

App2.initialize();