title: Ember.js: working next and previous buttons do not work on browser reload
body: <p>I am new to Ember.js but quite satisfied with my progress. I managed to get some <a href="http://discuss.emberjs.com/t/linking-to-the-next-previous-item-in-list-of-items/773/18" rel="nofollow">older code</a> working with the latest version, but when it comes to debugging i am an complete noob.</p>
  
  <p>So I added these buttons to browse through an array of models. Everything works fine, but when I refresh my browser at <code>localhost:4200/services/1</code> it stops working. </p>
  
  <p>Here is my controller:</p>
  
  <pre><code>export default Ember.ObjectController.extend({
    needs: ['services'],
    actions: {
      prevItem: function() {
        return this.advanceItem(-1);
      },
      nextItem: function() {
        return this.advanceItem(1);
      }
    },
    advanceItem: function(delta) {
      var index, length, items;
      items = this.get('controllers.services');
      length = items.get('length');
      index = (items.indexOf(this.get('content')) + delta + length) % length;
      console.log(items.indexOf(this.get('content')) + ' ' + delta + ' ' + length);
      return this.transitionToRoute('service', items.objectAt(index));
    }
  });
  </code></pre>
  
  <p>The ServiceController does not receive anything from 'controllers.services' and I don't know why? Any help?</p>
  
  <p>The complete project is available on <a href="https://github.com/PDXIII/Ember-Single-Page" rel="nofollow">Github</a>. Thank you in advance!</p>