Using AngularJS with a Google Spreadsheet data store.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    li > div {
      border: #cdcdcd 1px solid;
      padding: 1em;
  }
  </style>
</head>

<body ng-controller="mainController" ng-init="init()">

  <div class="row">
    <h1>Animal Search</h1>
    <div class="small-10 large-6 columns">
      <input type="text" ng-model="query" placeholder="Search by name" />
    </div>
    <div class="small-10 large-3 columns">
      <select ng-model="categoryFilter" ng-options="cat for cat in availableCategories">
        <option value="">Filter by Personality</option>
      </select>
    </div>
    <div class="small-10 large-3 columns">
      <select ng-model="speciesFilter" ng-options="spec for spec in availableSpecies">
        <option value="">Filter by Species</option>
      </select>
    </div>

    <ul class="small-block-grid-2 large-block-grid-3">
      <li ng-repeat="cat in results | filter:{gsx$name.$t: query} | filter:{gsx$personality.$t: categoryFilter} | filter:{gsx$species.$t: speciesFilter} | orderBy:orderProp" class="{{classes.gsx$name.$t}}">
        <div>
          <h3>{{cat.gsx$name.$t}}</h3>
          <img ng-src="{{cat.gsx$theimg.$t}}" width="250px" />
          <br />Personality : {{ cat.gsx$personality.$t || 'N/A' }}
          <br>Species : {{ cat.gsx$species.$t || 'N/A' }}
          <br>Color: <span style="background: {{ cat.gsx$color.$t}}; padding-right: 2em;"> &nbsp; </span>
        </div>
      </li>
    </ul>


    <div class="large-8 columns">
      Here is the Google Spreadsheet that contains the data:
      <br />
      <a href="https://docs.google.com/spreadsheets/d/1RF7iCiu9VdMyE0MB_cQH8QTnqV-3yFiR_lPyUNcvw5s/edit#gid=0">Famous Animals Google Spreadsheet</a>
    </div>
  </div>
</body>

</html>

var app = angular.module('myApp',[]);

app.controller("mainController", function($scope, $http){
    $scope.results = [];
    $scope.filterText = null;
    $scope.availableCategories = [];
    $scope.availableSpecies = [];
    $scope.categoryFilter = null;
   
    $scope.init = function() {
      // Download the spreadsheet data and add it to the scope objects above
      $http.jsonp('http://spreadsheets.google.com/feeds/list/1RF7iCiu9VdMyE0MB_cQH8QTnqV-3yFiR_lPyUNcvw5s/od6/public/values?alt=json-in-script' + '&callback=JSON_CALLBACK').success(function(data) {
        
        angular.forEach(data, function(value, index){
                angular.forEach(value.entry, function(classes, index){
                    $scope.results.push(classes);
                    angular.forEach(classes.gsx$personality, function(category, index){
                        var exists = false;
                        angular.forEach($scope.availableCategories, function(avCat, index){
                            if (avCat == category) {
                                exists = true;
                            }
                        });
                        if (exists === false) {
                            $scope.availableCategories.push(category);
                        }
                    }); 
                    angular.forEach(classes.gsx$species, function(species, index){
                        var exists = false;
                        angular.forEach($scope.availableSpecies, function(avSpec, index){
                            if (avSpec == species) {
                                exists = true;
                            }
                        });
                        if (exists === false) {
                            $scope.availableSpecies.push(species);
                        }
                    }); 
                });
            });
        }).error(function(error) {
 
        });
    };
    
    $scope.setCategoryFilter = function(category) {
      $scope.categoryFilter = category;
    };     

});

Using AngularJS with a Google Spreadsheet data store. The Google Spreadsheet is exported as JSON. The MainCtrl pulls the JSON data in and populates the scope objects.