title: AngularJS Pagination with Custom Filters
body: <p>I'm fairly new to AngularJS code, so I'm still learning my way around.</p>
  
  <p>I'm using the pagination code from this page: <a href="http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs" rel="nofollow">http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs</a></p>
  
  <p>Now, what I'm trying to do is paginate a list of images. There are custom AngularJS filters for this image list, including file size and image dimensions, which are controlled by checkboxes. The pagination mostly works, except when I click on one of the "filter by" options. Then, there's pagination, but maybe 2 images on one page and 10 on another.</p>
  
  <p>This is the ngRepeat line:</p>
  
  <pre><code>&lt;tr dir-paginate="image in Images | filter: imageSearch | itemsPerPage: 10 | dimBoxes:filterByDim | sizeBoxes: filterBySize | orderBy: predicate" current-page="currentPage"&gt;
  </code></pre>
  
  <p>Here is an example of one of the custom filters:</p>
  
  <pre><code>App.filter('sizeBoxes', function() {
    return function(items, filterBySize) {
      var filtered = [];
  
      angular.forEach(items, function(item) {
        var fileSize = item.filesize / 1024;
  
          if (!filterBySize.under500kb &amp;&amp; !filterBySize.from500kbto1mb &amp;&amp; !filterBySize.over1mb) {
            filtered.push(item);
      }
  
      if (fileSize &lt; 500 &amp;&amp; filterBySize.under500kb) {
        filtered.push(item);
      } else if (fileSize &gt;= 500 &amp;&amp; fileSize &lt;= 1024 &amp;&amp; filterBySize.from500kbto1mb) {
        filtered.push(item);
      } else if (fileSize &gt; 1024 &amp;&amp; filterBySize.over1mb) {
        filtered.push(item);
      }
    });
  
    return filtered;
    };
  });
  </code></pre>
  
  <p>I saw a couple posts that seemed similar but didn't really apply to my specific situation, I think. Thanks in advance for any help.</p>