title: AngularJS, pagination for images from flickr
body: <p>I am creating an app that should fetch images from flickr and show 20 of them on each page. Now, there are many custom directives out there for pagination of text data from JSON, but I've no idea how to make it work with images. I've tried with dirPagination.js which is kinda popular, but I couldn't make it to work. Ill provide the code, and kindly ask for help with this one.
  HTML:</p>
  
  <pre><code>    &lt;div ng-controller="recentImages"&gt;
  &lt;div ng-repeat="item in imageList.photos.photo"&gt;
      &lt;div id="imgThumbs"&gt;
          &lt;img src="https://farm{{item.farm}}.staticflickr.com/{{item.server}}/{{item.id}}_{{item.secret}}_m.jpg" alt=""/&gt;    
      &lt;/div&gt;      
  &lt;/div&gt;                                      
  &lt;/div&gt;  
  </code></pre>
  
  <p>Angular:</p>
  
  <pre><code>var App = angular.module('App', ['ngRoute']);
  
  
   var recent = "flickr.photos.getRecent";
  var page = 1;
  
  App.controller('recentImages', ['$scope', 'forAllone', function($scope, forAllone) {
      forAllone.success(function(data) {
      $scope.imageList = data;
    });
  }]);
  
  
  
  App.factory('forAllone', ['$http', function($http) { 
          return $http.get('https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&amp;format=json&amp;nojsoncallback=?&amp;per_page=20&amp;page='+page+'&amp;api_key=5eb283c54e823624591d2c22db0217cb') 
              .success(function(data) { 
                return data; 
              }) 
              .error(function(err) { 
                return err; 
              }); 
  }]);
  </code></pre>