Angular.JS ng-repeat with nested json array

Question

I have a People service using $resource, which I call from a PeopleCtrl using People.query() to get a list of user from a json api. The data comes back like so:

[
  {
    "usr_id" : "1"
    "first_name" : "lucky"
    "awesome" : "true"
  },
  {
    "usr_id" : "6"
    "first_name" : "Adolf"
    "awesome" : "false"
  }
]

and in my html, i want to use ng-repeat, and filters with that data. the idea is I have a list of users, and I want to filter them from an input field. I can get the basic to work, but as soon as I type in 'k', it shows all results, rather than only those with the letter 'k'. This is what I have:

  <div id="section-body" ng-controller="PeopleSearchCtrl">

    <input type="text" ng-model="search.first_name" placeholder="Search Your Name">

    <center>
      <table ng-show="(filteredData = (People | filter:search)) && search.first_name && search.first_name.length >= 1">
        <tr ng-repeat="per in filteredData" ng-click="search.first_name = per.first_name + ' ' + per.last_name">
          <td>{{per.per_id}}</td>
          <td>{{per.first_name + " " + per.last_name}}</td>
        </tr>
      </table>
    </center>
    <button class="btn btn-large btn-primary" type="button">Submit</button>

  </div>

But as soon as I try to type in the input, it shows all users. type second letter, no change, type third letter, only shows the matching records. delete characters until only 'k' is remaining, no records show. So I am wondering how it is that I am doing this wrong. The 'People' variable is assigned to the scope, and is the resulted data array of users.

Answer 1

Here's how it works. It's pretty easy once you figure it out.

<input ng-model="query">

<table id="productList" ng-show="(products|filter:query).length">
  <tr ng-repeat="product in products|filter:{username:query}">
...