How to iterate over an ArrayController in ember.js

Seems pretty simple, but I can't seem to get it.

What is odd, is the Chrome/Ember developer tools show that the controller has the desired data in the model. But any attempt to iterate or use that data is met with an error.

App.Component3Route = Ember.Route.extend({
  data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  setupController: function(controller) {
    controller.set('model', this.get('data'));
  }
});

App.Component3Controller = Ember.ArrayController.extend({})

<script type='text/x-handlebars' id='component3'>
        <h4> this is the third component </h4>      
        {{trying to iterate over the model}}
</script>