title: Ember StateManager, injecting controllers and using initialState
body: <p>I have the following StateManager which deals with a couple of views.  I would like to not have to manually transition into the initial state with  <code>App.stateManager.transitionTo('showingPhotos')</code>.  I would prefer just to use the <code>initialState</code> property of the state manager.  </p>
  
  <p>Using the <code>initialState</code> property of the of the StateManager doesn't work in this case though because the controllers are not available until they are injected in with <code>App.initialize(App.stateManager)</code>.  </p>
  
  <p>Is there a way to avoid having to manually transition into the initial state whilst also injecting the controllers?  Is there a better way to structure a state manager like this?</p>
  
  <p>I have created two JSfiddles:</p>
  
  <p><a href="http://jsfiddle.net/GmD8A/" rel="nofollow">http://jsfiddle.net/GmD8A/</a> - this works but I have to manually transition into the initial state</p>
  
  <p><a href="http://jsfiddle.net/tgbuX/" rel="nofollow">http://jsfiddle.net/tgbuX/</a> - this uses <code>initialState</code> rather than manually transitioning into the initial state and hence doesn't work.</p>
  
  <pre class="lang-js prettyprint-override"><code>PhotosListView = Ember.View.extend({
    template: Ember.Handlebars.compile('&lt;h2&gt;Showing Photos&lt;/h2&gt;&lt;a {{action "showContacts"}}&gt;Show Contacts&lt;/a&gt;')
  });
  
  ContactsListView = Ember.View.extend({
    template: Ember.Handlebars.compile('&lt;h2&gt;Showing Contacts&lt;/h2&gt;&lt;a {{action "showPhotos"}}&gt;Show Photos&lt;/a&gt;')
  });
  
  StateManager = Ember.StateManager.extend({
    rootElement: '#body',
    showingContacts: Ember.ViewState.extend({
      view: ContactsListView,
      showPhotos: function(manager) {
        manager.transitionTo('showingPhotos');
      },
      enter: function(manager) {
        this._super(manager);
        this.setPath('view.controller', manager.get('photosController'));
      }
    }),
    showingPhotos: Ember.ViewState.extend({
      view: PhotosListView,
      showContacts: function(manager) {
        manager.transitionTo('showingContacts');
      },
      enter: function(manager) {
        this._super(manager);
        this.setPath('view.controller', manager.get('contactsController'));
      }
    })
  });
  
  App                    = Ember.Application.create()
  App.PhotosController   = Ember.ArrayController.extend()
  App.ContactsController = Ember.ArrayController.extend()
  App.stateManager       = StateManager.create()
  
  App.initialize(App.stateManager) // This injects the controllers
  App.stateManager.transitionTo('showingPhotos') // I don't want to have to manually transition into this initial state
  </code></pre>
  
  <p>​</p>