Ember.js: select state not saved in URL when reload page

There are select on the page for choosing country and it's need to save selected value in URL. I declared query params in route-driven controllers. It's all work! If country select is changed then url also changed.

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

But if I reload page with some valid GET params then it params convert to 'undefined'. For example, I try to load page

http://ift.tt/1JGFgEB

and it redirect to

http://ift.tt/1Ga9Y6O

Why?

# index.hbl
<script type="text/x-handlebars" id="index">
    {{view "select" content=countries   
                  optionValuePath="content.id" 
                  optionLabelPath="content.name"  
                  value=country
                  prompt="Select a country"}}
</script>

# apps.js
App = Ember.Application.create({});

// ROUTES
App.IndexRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('countries', this.store.find('country'));
    }
});

// CONTROLLERS
App.IndexController = Ember.Controller.extend({
    queryParams: ['country'],
    country: null,
});

// MODELS
App.Country = DS.Model.extend({  
    name: DS.attr('string'),
});

$.mockjax({
  url: "/countries",
  dataType: 'json',
  responseText: {
    "country": [
      {"id":1, "name":"Абхазия"},
      {"id":2, "name":"Австралия"},
      {"id":3, "name":"Австрия"},
      {"id":4,"name":"Азейбарджан"},
    ],
  }
});