Ember Restore State when Routing

I have a application controller with a input bound to searchTerms and on click I am routing to search-results route. The code is from a book

Rocknrollcall.Router.map(function() {
    // Add your routes here
    this.route('search-results', {
        path: 'search/:term'
    });

  });

});

Rocknrollcall.ApplicationController = Em.ObjectController.extend({ searchTerms: '', actions: { submit: function() { this.transitionToRoute('search-results',this.get('searchTerms')); } } });

In the route I am returning some data I am rendering in search results

Rocknrollcall.SearchResultsRoute = Ember.Route.extend({
  model: function (query) {
     // ajax call
     return {artists: artists, songs: songs}
   });

}

});

Everything works fine. If I go from index and enter say tom I go to this URL "http://localhost:9000/#/search/tom" with all data.

However the point is when I put the URL directly in browser I do get the data. But the search term input box in the application template is empty. I would like to populate that also somehow. My question is what is the best solution to do so in Ember properly?