Angular JS - filtering repeaters

This section intended to showcase the full text search capability. In this example, the team made the controller untouched. 

the view is changed like this below 

div class=“container-fluid“

div class=“row”

div class=“col-md2”

Search : input ng-model=query

/div

div class=“col-md-0”

ul class=“phones”

li ng-repeat=“phone in phones | filter:query”

{{phone.name}}

p {{phone.snippet}}

The change here was that we added a standard input tag and also an angular filter function to process the input for the ng-repeat directive. 

Below are the items it tries to demonstrate by this

Data Binding: When the page loads, the Angular binds the name of the input field to a variable of same name in the data model and keeps both in sync

In this code, the data that user types into the input box is immediately available as filter input in the list repeater. When changes to the data model cause the repeater’s input to change, the repeater efficiently updates the DOM to reflect the current state of the model. 

Use of filter filter. The filter function uses the query value to create a new array that contains only those records that matches the query.  ngRepeat automatically updates the view in response to the changing number of phones returned by the filter filter. The process is completely transparent to the developer. 

references:

https://docs.angularjs.org/tutorial/step_03