Update Ember model from controller

currently i try to create like infinite scroll by putting some button in the template to load more data.

bellow is the code

index.hbs

 {{#each model}}
  <p>{{name}}</p>
 {{/each}}
  <button {{action "addMore"}}>add MORe </button>

controller/index.js

 import Ember from 'ember';

  export default Ember.ArrayController.extend({
  actions:{
  addMore: function (){
  this.get("model").push({name:"some data"});

  }
  }

  });

and route index.js

 import Ember from 'ember';

 export default Ember.Route.extend({
 model: function() {
 var v=[];
 return v

 }
 });

The problem was, after user clicked the button, the controller pushed the data into the model, but the template did not show model with current data (data after the controller push new data into the model).

please help

thanks