How to create nested Ember.js Objects

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/x-handlebars">
    <h1>Account {{App.account.id}}: {{App.account.name}}</h1>
    <ul>
    {{#each App.account.positions}}
        <li>{{symbol}}: {{quantity}}</li>
    {{/each}}
    </ul>
</script>

JavaScript

window.App = Em.Application.create();

App.jsonObject = {
    id: 1812,
    name: 'Brokerage Account',
    positions: [
        {
            symbol: 'AAPL',
            quantity: 300
        },
        {
            symbol: 'GOOG',
            quantity: 500
        }
    ]
};

App.account = Ember.Object.create(App.jsonObject);

App.controller = Ember.Object.create({
    contentBinding: 'App.account',
    
    // This will be called when your positions array's length changes
    contentDidChange: function(target, property, value) {
        console.log('property:' + property + '\nvalue:' + value);
    }.observes('content.positions.length')
});

setTimeout(function() {
    // this works just fine!
    App.account.set('name', 'Brokerage Account 1');

    // does not add new position to UI
    App.account.get('positions').pushObject({symbol: 'MSFT', quantity: 200});
}, 3000);