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.company}}
        <li>{{no}}: {{name}}</li>
    {{/each}}
    </ul>
</script>

JavaScript

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

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

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

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

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

    // Generates an error because position does not have a setProperties method
    // App.account.positions[0].setProperties({'quantity': 500});
}, 3000);