title: Ember routes not loaded in order
body: <p>I'm having an issue where the <code>beforeModel</code> (or <code>afterModel</code>) on my route isn't called <em>after</em> the application controller has been setup. This is an issue because I need some data from the application controller.</p>
  
  <p>In another route this works as I'd expect (that the application controller is loaded prior to the route). The only difference is the one that works is an <code>Ember.ArrayController</code> and the one that doesn't is a standard <code>Ember.Controller</code>. I'm using <code>beforeModel</code> even though there isn't a model simply because I'm trying to transition away from it if a condition isn't meet.</p>
  
  <p>If I change my non-working controller to an <code>Ember.ArrayController</code> and put in a pointless <code>model</code> call in the router then it still doesn't work.</p>
  
  <p>The only other difference I can think of is that the one that isn't working is a nested controller defined by just a <code>route</code> and the working one isn't nested and is defined by <code>resource</code>.</p>
  
  <pre><code>Router.map(function() {
  
    this.resource("wizard", function() {
      this.resource("wizard/schools", {path: "/schools"}, function() {
        this.route("new"); // This one doesn't work
      });
    });
  
    ...
  
    this.resource("schools", { path: "/schools" }); // This one does work
  });
  </code></pre>
  
  <p>Any idea how I can ensure the application route/controller is loaded prior to my route?</p>
  
  <p>I'm trying to do something along the lines of:</p>
  
  <pre><code>beforeModel: function() {
    var customerAccountPromise = this.controllerFor('application').get('customerAccount');
    var self = this;
    return customerAccountPromise.then(function(customerAccount) {
      return self.get('store').find('school').then(function(schools) {
        if (customerAccount.get('schoolLimit') &lt;= schools.get('length')){
          self.transitionTo('school', schools.get('firstObject'));
        }
      });
    });
  },
  </code></pre>
  
  <p>I'm currently running:</p>
  
  <pre><code>DEBUG: Ember      : 1.8.1
  DEBUG: Ember Data : 1.0.0-beta.12
  DEBUG: Handlebars : 1.3.0
  DEBUG: jQuery     : 1.11.1
  </code></pre>
  
  <p><strong>Update:</strong> here is the code for the working route:</p>
  
  <pre><code>import Ember from 'ember';
  import AuthenticatedRoute from "./authenticated";
  
  var SchoolsRoute = AuthenticatedRoute.extend({
    model: function() {
      return this.get('store').find('school');
    },
    afterModel: function(schools) {
      Ember.Logger.log("SchoolsRoute - afterModel");
      var customerAccountPromise = this.controllerFor('application').get('customerAccount');
      var self = this;
      return customerAccountPromise.then(function(customerAccount) {
        if (customerAccount.get('schoolLimit') === 1){
          self.transitionTo('school', schools.get('firstObject'));
        }
      });
    },
  });
  </code></pre>
  
  <p>export default SchoolsRoute;</p>
  
  <p>The application controller is just aliasing the session controller.</p>
  
  <pre><code>import Ember from 'ember';
  
  var ApplicationController = Ember.Controller.extend({
    needs: ['session'],
  
    currentUser: Ember.computed.alias('controllers.session.currentUser'),
    customerAccount: Ember.computed.alias('currentUser.customerAccount'),
  
    ...
  });
  
  export default ApplicationController;
  </code></pre>
  
  <p>The router for the application is pretty simple:</p>
  
  <pre><code>import Ember from 'ember';
  
  var ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
      Ember.Logger.log("application setupController");
      return this._super(controller, model);
    },
    ...
  });
  
  export default ApplicationRoute;
  </code></pre>
  
  <p>The important part in <code>AuthenticatedRoute</code> is the <code>beforeModel</code>:</p>
  
  <pre><code>beforeModel: function(transition) {
    Ember.Logger.log("AuthenticatedRoute - beforeModel");
    if (Ember.isEmpty(this.controllerFor('session').get('token'))) {
      // set notification
      return this.redirectToSignIn(transition);
    }
  },
  </code></pre>
  
  <p>There is no other "setting up" of the <code>SessionController</code>. It is simply called via the <code>controllerFor</code>. And on <code>init</code> it calls a <code>loadUser</code> method which immediately logs the message "SessionController - loadUser" and then does a <code>store.find</code> call and when that returns it logs a message about setting the user.</p>
  
  <p>And the logs show that the application gets setup first:</p>
  
  <pre><code>DEBUG: -------------------------------
  DEBUG: Ember      : 1.8.1
  DEBUG: Ember Data : 1.0.0-beta.12
  DEBUG: Handlebars : 1.3.0
  DEBUG: jQuery     : 1.11.1
  DEBUG: -------------------------------
  AuthenticatedRoute - beforeModel
  SessionController - loadUser
  generated -&gt; route:loading Object {fullName: "route:loading"}
  application setupController
  Rendering application with default view &lt;school-app@view:toplevel::ember365&gt; Object {fullName: "view:application"}
  generated -&gt; controller:loading Object {fullName: "controller:loading"}
  Rendering loading with default view &lt;school-app@view:default::ember386&gt; Object {fullName: "view:loading"}
  XHR finished loading: GET "http://0.0.0.0:4200/api/users?email=ryan%40ryanjm.com".
  SessionController - set user
  Ember Inspector Active
  XHR finished loading: GET "http://0.0.0.0:4200/api/school".
  SchoolsRoute - afterModel
  </code></pre>
  
  <p>Here is the session controller:</p>
  
  <pre><code>import Ember from 'ember';
  
  var SessionController = Ember.Controller.extend({
    // called by updateHeaders
    loadUser: function() {
      Ember.Logger.log("SessionController - loadUser");
      if (this.get('isSignedIn') &amp;&amp; !this.get('currentUser')){
        var self = this;
        this.store.find('user', { email: this.get('email') }).then(function(users) {
          Ember.Logger.log("SessionController - set user");
          self.set('currentUser', users.get('firstObject'));
        });
      }
    },
  
    // if email/token change, update the headers
    updateHeaders: function() {
      if (this.get('isSignedIn')){
        Ember.$.ajaxSetup({
          headers: {
            'X-User-Email': this.get('email'),
            'X-User-Token': this.get('token')
          }
        });
        this.loadUser();
      }
    }.observes('email', 'token').on('init'),
  
    hasEmail: Ember.computed.notEmpty('email'),
    hasToken: Ember.computed.notEmpty('token'),
    isSignedIn: Ember.computed.and('hasEmail', 'hasToken'),
  
  });
  
  export default SessionController;
  </code></pre>
  
  <hr>
  
  <p>Based on Kingpin2k's suggestion I looked at the case of it being a race condition and that was the issue.</p>
  
  <p>Therefore I changed my SessionController to a normal object and then injected it into the application route so that I could return the <code>loadUser</code> function as a promise in the <code>beforeModel</code>.</p>