Overriding arrangedContent on the controller seem to stop content updates caused by other methods

1

I have a controller with a method for searching the content:

Scrolls.IndexController = Ember.ArrayController.extend({    
  searchResult: function() {
    var that = this;
    this.get('model').set('content', this.store.filter('scroll', function(item) {
      var searchTerm = that.get('searchCard');
      var regExp = new RegExp(searchTerm, 'i');
      return regExp.test(item.get('name'));
    }));
  }.observes('searchCard')
});

I’ve then overriden arrangedContent to limit the number of items being being displayed, which seem to cause the effect of searchResults to not take place.

Scrolls.IndexController = Ember.ArrayController.extend({
  arrangedContent: Ember.computed('content', function() {
    var count = 0;
    return this.get('content').filter(function() {
      count++;
      return count <= 12;
    });
  }),

  searchResult: function() {
    var that = this;
    this.get('model').set('content', this.store.filter('scroll', function(item) {
      var searchTerm = that.get('searchCard');
      var regExp = new RegExp(searchTerm, 'i');
      return regExp.test(item.get('name'));
    }));
  }.observes('searchCard')
});

How can I get these two things to interract nicely?