How to use Ember query parameters with beforeModel and select?

Demo: http://ift.tt/1Favt87

I use the query parameters in my appliaction. And the queryParameters are 'name' and 'category'.

The 'name' use the select and the 'category' use input, but the 'name' select has some wrong if I set it default is null.

If I change the 'name', the 'name' alway is undefined in the url.

Route:

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.controllerFor('index').set('products', [1,2,3]);
  },
  model: function() {
    return [{'is_active':false, 'name':'One'}, {'is_active':false, 'name':'Two'}, {'is_active':false, 'name':'Three'}, {'is_active':false, 'name':'Four'},{'is_active':false, 'name':'Five'}];
  },
  actions: {
    queryParamsDidChange: function() {
      this.refresh();
    }
  }
});

Controller:

App.IndexController = Ember.Controller.extend({
  queryParams: ['name', 'category'],
  name: null,
  category: null
});

Template:

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{view "select" content=products value=name prompt="all"}}
  {{input type="text" value=category class="form-control"}}
  <ul>
    {{#each model as |item|}}
      <li>{{item.name}}</li>
    {{/each}}
  </ul>
</script>

Can you help to check what is happen to my application?
Any help please.