Filtering with search field in AngularJS

Question

Search filtering is not working for me in AngularJS.

My navbar.html:

<input type="text" placeholder="Search" data-ng-model="searchQuery">

In the view template:

<ul class="userlist">
  <li class="list" data-ng-repeat="user in users | filter: searchQuery">
    <!--users show here-->
  </li>
</ul>

In the index.html:

<div data-ng-include data-src="'./templates/navbar.html'"></div>
<div data-ng-view></div>

I do not receive any error messages, it just does not work. Is this because the model is in separate templates?

---

2 hours later and I still have no clue how to implement this. But I think I am getting closer. When I change the searchQuery string, it filters the results. So all I need to find out is how I control this string from the navbar template (which is included with ng-include).

The two controllers:

//NAVBAR template controller
app.controller('NavbarController', ['$scope', '$location',
    function ($scope, $location) {

    }]);

//LIST page controller
app.controller('ListCtrl', ['$scope', '$http',
    function ($scope, $http) {

        $scope.listpage = {'searchQuery' : ''};

        //...

    }]);

view.html:

<li data-ng-repeat="user in users | filter: listpage.searchQuery">

navbar.html

<input type="text" data-ng-model="listpage.searchQuery">

How do I change the listpage object in the navbar template (which is included with ng-include), so that it is applied in the filter?

Answer 1

When using ng-model, always try to use indirect references (reference properties of an object on scope rather than a scope property itself). Using

ng-model="someObject.searchQuery"

will correctly share your data across scope trees, while

ng-model="searchQuery"

will write only on your local scope and leave the parent unchanged.