Ember.js root view won't render on refresh

Question

I have a root template with an outlet and then a nested dynamic resource. When you enter a name into an input in the root view, an ajax request will asynchronously retrieve a model for nested dynamic resource and render a template using information from that model. It's all working fine when I start from the root and use the input to call the nested resource.

So everything is working perfectly, and the nested resource updates the url, but when I refresh or paste the url into the nav bar I just get a blank page. No errors but no HTML at all. I have verified that the ajax request is successful and my model is created. As far as I can tell the root template is not rendered, and so my nested template has no place to go.

I thought ember was supposed to make this easy and automatic, how do I make the root template render when I am going directly to a nested route?

Here is the router:

App.Router.map(function() {
  this.resource('app', {path: '/'}, function(){
    this.resource('user', {path: ':screen_name'});
  });
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('app');
  }
});

App.UserRoute = Ember.Route.extend({
  model: function(params) {
    var that = this;
    var promise = Ember.$.getJSON('/users/new?screen_name=' + params['screen_name']);

    promise.then(fulfill, reject);

    function fulfill (answer) {
      return that.store.createRecord('user', answer);
    }

    function reject (reason) {
      console.log("failure");
      return false;
    }

    return promise;
  },

  serialize: function(user) {
    return {screen_name: user.get('user.screen_name')};
  }
});

Here is the AppController:

App.AppController = Ember.ObjectController.extend({
  actions: {
    findUser: function(){
      var that = this;
      var name = that.get('screen_name');
      that.set('screen_name', '');
      that.transitionToRoute('user', name);
    }
  },

  screen_name: ''
});

App.AppIndexController = Ember.ObjectController.extend({
  needs: "app",
  app: Ember.computed.alias("controllers.app")
});

Here is the UserController:

App.UserController = Ember.ObjectController.extend({
  needs: "app",

  backgroundPic: function(){
    return this.get('model.user.profile_banner_url');
  }.property('model.user.profile_banner_url'),

  profilePic: function(){
    return this.get('model.user.profile_image_url');
  }.property('model.user.profile_image_url')
});

Here is the user model, it just accepts the JSON object that is returned by the AJAX request:

App.User = DS.Model.extend();