title: Reload and Randomise content on click angularjs
body: <p>I have built the following simple app which loads in some media from the instagram API using angularjs. What I would like to do is add a button at the bottom which when you click reloads and randomises the content. Say for example the length of pics is now 20, and only 6 are shown, I just want to show a random 6 of the 20 each time the button is clicked. How would I go about this?</p>
  
  <p>machinas.com/wip/machinas/instagramfeed/</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section ng-controller="ShowImages as images" class="page" ng-hide="pics.length &lt; 6"&gt;
       &lt;div  class="container" data-ng-class="{ 'loaded': pics.length &gt; 0 }"&gt;
           &lt;div ng-show="layout == 'grid'" class="row"&gt;
                 &lt;!-- A view with big photos and no text --&gt;
    &lt;div ng-repeat="p in pics | limitTo: 6" class="column large-4 overlay-col"&gt;
        &lt;a href="{{p.link}}" target="_blank"&gt;&lt;img ng-src="{{p.images.standard_resolution.url}}" /&gt;&lt;/a&gt;
         &lt;div class="overlay-hover"&gt;
           &lt;div class="overlay-content"&gt;
               &lt;a href="{{p.comments.data|getFirstCommentFrom:'alx_lloyd'}}" class="cta-1"&gt;Discover now&lt;/a&gt;
    &lt;/div&gt;                                                
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  ..
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function(){
      //Place your own Instagram client_id below. Go to https://instagram.com/developer/clients/manage/ and register your app to get a client ID
    var client_id = '83aaab0bddea42adb694b689ad169fb1';
      //To get your user ID go to http://jelled.com/instagram/lookup-user-id and enter your Instagram user name to get your user ID
    var user_id = '179735937';
  
    var app = angular.module('instafeed', ['ngAnimate']);
      app.filter('getFirstCommentFrom',function(){
    return function(arr, user){
      for(var i=0;i&lt;arr.length;i++)
      {
        if(arr[i].from.username==user)
          return arr[i].text;
      }
      return '';
    }
  })
  
    app.factory("InstagramAPI", ['$http', function($http) {
      return {
        fetchPhotos: function(callback){
          var endpoint = "https://api.instagram.com/v1/users/self/media/liked/";
          endpoint += "?access_token=179735937.83aaab0.e44fe9abccb5415290bfc0765edd45ad";
          endpoint += "&amp;callback=JSON_CALLBACK";
          /*   var endpoint = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?";
          endpoint += "?count=99";
          endpoint += "&amp;client_id=" + client_id;
          endpoint += "&amp;callback=JSON_CALLBACK";
  */
          $http.jsonp(endpoint).success(function(response){
            callback(response.data);
  
          });
        }
      }
    }]);
  
    app.controller('ShowImages', function($scope, InstagramAPI){
      $scope.layout = 'grid';
      $scope.data = {};
      $scope.pics = [];
  
  
  
      InstagramAPI.fetchPhotos(function(data){
        $scope.pics = data;
        console.log("length is "+data.length)
      });
    });
  
  
  })();
  </code></pre>