Ember.js blog app architecture

Design
1

Hi, I decided to create simple blog app which should has the following interface Wireframe.cc – the go-to free, online wireframing tool. For this purpose I created blog route which contain the following code:

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function (controller, model) {
    controller.set('currentPost', 0);
    controller.set('model', model.objectAt(controller.get('currentPost')));
  },

  model: function () {
    return this.store.find('blog-post');
  },

  actions: {
    nextPost: function () {
      var controller = this.controller;
      controller.incrementProperty('currentPost');
      this.store.find('blog-post').then(function (value) {
        controller.set('model', value.objectAt(controller.get('currentPost')));
      });
    }
  }
});

In blog.hbs I have blog-post component. This component receive data from model, which is filtered inside setupController method, in order to load only one post, but not the whole array of posts. But when user clicks Next button, I need update data in component. The problem is, that it’s look a little bit ugly

nextPost: function () {
          var controller = this.controller;
          controller.incrementProperty('currentPost');
          this.store.find('blog-post').then(function (value) {
            controller.set('model', value.objectAt(controller.get('currentPost')));
          });
        }

Is there any way to make the code more elegant and simple?