title: How to update the UI immediately when a new record is added? Related to ember-cli-pagination
body: <p>In our app, there is a Company page, which lists all the companies in paginated way. We are using Ember 1.13 and ember-cli-pagination addon for pagination. The data is coming from Rails API, so we are using <a href="https://github.com/mharris717/ember-cli-pagination#remote-paginated-api" rel="nofollow">remote paginated API</a> scenario. Everything is working fine for now, 10 records on each page, next and previous buttons etc. Only problem is when we add a new record, the record is saved but it doesn't show up on the UI immediately, we have to refresh the page for that. There are other parts of our app where we don't have pagination, so when we add a new record, UI is updated immediately without any refresh.</p>
  
  <p>One issue has been reported in the repo of the addon related to this - <a href="https://github.com/mharris717/ember-cli-pagination/issues/89" rel="nofollow">https://github.com/mharris717/ember-cli-pagination/issues/89</a></p>
  
  <p>I tried that but it didn't work. Any suggestions?</p>
  
  <h2>EDIT</h2>
  
  <p>models/company.js</p>
  
  <pre><code>import DS from 'ember-data';
  import Ember from 'ember';
  import EmberValidations from 'ember-validations';
  import Notable from './notable';
  
  export default Notable.extend(EmberValidations, {
   // Attributes
  companyName         : DS.attr('string'),
  companyNotes        : DS.attr('string'),
  .
  .
  .
  
  // Associations
  owner               : DS.belongsTo('user', { inverse: 'companiesOwned'    }),
  assignedTo          : DS.hasMany('user', { inverse: 'companiesAssigned', async: true }),
  .
  .
  .
  
  avatar              : DS.belongsTo('attachment', { async: true }),
  persons             : DS.hasMany('person', { async: true }),
  .
  .
  .
  
  });
  </code></pre>
  
  <p>routes/company.js</p>
  
  <pre><code>import Ember from 'ember';
  import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
  import RouteMixin from 'ember-cli-pagination/remote/route-mixin';
  
  export default Ember.Route.extend(RouteMixin, AuthenticatedRouteMixin, {
   model: function(params) {
     return Ember.RSVP.hash({
        company         : this.findPaged('company', params),
        users           : this.store.findAll('user'),
        .
        .
        .
     });
  },
  
  setupController: function(controller, models) {
    this._super(controller, models);
    controller.set('model', models.company);
    controller.set('users', models.users);
    .
    .
    .
  }
  });
  </code></pre>
  
  <p>controllers/company.js</p>
  
  <pre><code>import Ember from 'ember';
  import pagedArray from 'ember-cli-pagination/computed/paged-array';
  
  export default Ember.Controller.extend({
      listView              : false,
      newCompany            : false,
      creatingCompany       : false,
      showingCompany        : false,
      editingCompany        : false,
  
      // Pagination
      queryParams: ['page', 'perPage'],
      pageBinding: 'content.page',
      perPageBinding: 'content.perPage',
      totalPagesBinding: 'content.totalPages',
      page: 1,
      perPage: 10,
  
      disableDelete : true,
  
  actions: {
  createCompany: function() {
    // debugger;
    var company = this.get('store').createRecord('company');
    this.set('company', company);
    this.set('editCompanyPane', true);
    this.set('disableDelete', true);
  },
  
  // Edit Company
  editCompany: function(company) {
    this.set('company', company);
    this.set('editCompanyPane', true);
    this.set('disableDelete', false);
  },
  
  closeEditCompany: function() {
    this.get('company').rollback();
    this.set('editCompanyPane', false);
    this.set('disableDelete', true);
  },
  
  saveCompany: function(company) {
    var _this = this;
  
    company.save().then(function() {
      Ember.get(_this, 'flashMessages').success('company.flash.companySaveSucessful');
      _this.set('editCompanyPane', false);
    }, function() {
      Ember.get(_this, 'flashMessages').danger('apiFailure');
    });
  },
  
  // Delete Company
  deleteCompany: function(company) {
    var _this = this;
  
    company.destroyRecord().then(function() {
      Ember.get(_this, 'flashMessages').success('company.flash.companyDeleteSucessful');
      _this.set('editCompanyPane', false);
    }, function() {
      Ember.get(_this, 'flashMessages').danger('apiFailure');
    });
  },
  }
  
  })
  </code></pre>
  
  <p>Templates is just a list of ten records per page. Exactly same as Remote pagination API example.</p>
  
  <pre><code>  {{#each model as |company|}}
     &lt;div class="col-md-3"&gt;
      {{partial 'companies/modal-view'}}
     &lt;/div&gt;
    {{/each}}
  
    {{ page-numbers content=content }}
  </code></pre>