How to filter JSON Data from an AngularJS $http request using an ng-model input

Question

I am struggling with a problem that I think may be down to the scope I am working within. I use a $http request to get some json data.

var myApp = angular.module('myApp', []);
myApp.controller('PeopleController', function($scope, $http) {
var url = 'https://sweltering-fire-6061.firebaseio.com/people.json';
$http.get(url).success(function(data) {
    $scope.people = data;
});

The data displays fine within my table:

<table>
    <tr ng-repeat="person in people | filter:query | orderBy:orderBy">
        <td>{{person.name}}</td>
        <td>{{person.born}}</td>
    </tr>
</table>
<p>
   <select ng-model="orderBy">
      <option value="name">Name</option>
      <option value="born">Birth</option>
   </select>
</p>
<p>Search:<input ng-model="query"/></p>

However since I stated retrieving the data with a $http request my filter and orderBy no longer work. Is this because I am setting $scope.people = data within a lower scope. If it is, is there someway I can work around this?

I have tested this in Cloud9 IDE and Brackets. Thank You

Answer 1

The data you return is not correct, the output of the url:

https://sweltering-fire-6061.firebaseio.com/people.json is:

{"0":{"born":1791,"name":"Charles Babbage"},"1":{"born":1955,"name":"Tim Berners-Lee"}

Which means: object.0 = {"born":1791,"name":"Charles Babbage"} You might want to return an array, because it now tries to filter on "born" or "name", while those attributes are one layer deeper in your objects!