OSDC: Filter example

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>OSDC: Filter example</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.0.5/css/foundation.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="//raw.github.com/angular/bower-angular-resource/master/angular-resource.min.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-app="MyApp">
    <div class="container" ng-controller="AppCtrl">
      <input type="text" ng-model="searchText">
      <div class="row">
        <div class="large-12 columns">
        <ul class="small-block-grid-2 large-block-grid-4">
          <li ng-repeat="image in images.data | picFilter:searchText">
            <a class="th radius">
              <img ng-src="{{image.images.thumbnail.url}}" />
            </a>
            <div>
              {{image.tags}}
            </div>
          </li>
        </ul>
        </div>
      </div>
    </div>
  </body>
  
</html>

var myapp = angular.module('MyApp', ['ngResource']);

myapp.factory('InstagramPopular', function($resource) {
  return $resource(
            'https://api.instagram.com/v1/media/popular',
            { callback: 'JSON_CALLBACK' }, {
            get: {
                method: 'JSONP',
                params: {
                    'client_id': '78de3bcbf870489685dc2892772b0878'
                }
            }
        });
});

myapp.filter('picFilter', function() {
  return function(images, searchText) {
    var imgLen,
        tagsLen, tag,
        results = [];
        
    if (images === undefined){
      return [];
    }
      results = images;
      imgLen = images.length;
      for (var i = 0; i < imgLen; i++) {
        tagsLen = images[i].tags.length;
        if (tagsLen > 0) {
          for (var j = 0; j < tagsLen; j++) {
            tag = images[i].tags[j];
            if (tag === searchText) {
              results = results.slice(i, i+1);
            }
          }
        }
      }
      
      return results;
  };
});

myapp.controller('AppCtrl', function($scope, InstagramPopular) {
  $scope.images = InstagramPopular.get(function(results) {
    console.log(results);
    results.data.push({
      tags: ['人魚線', '鮪魚線'],
      images: {
        thumbnail: {
          url: 'http://map-diary.com/attachment/201303/18/598_13636162994jVQ.jpg' 
        }
      }
    });
  });
});