In the previous post ‘starting with controller‘ we learnt how to create and use the controller and ng-repeat directive in the AngularJS template. In the post we will learn the filtering and order by functionality within the repeaters(using ng-repeat). In the below example user enter the search keyword(s) in the input element and see the immediately city list based on the search criteria.
Picture 1.1 shows list of cities and a textbox for the input the search creteria. When you type the ‘new’ in textbox, the list automatically filtering the records. Picture 1.3 show the search result according to b – All cities started with the ‘b’ will be filtered. This is the commonly used feature. In the below I will explain you that how can we do it with the help of AngularJS.
Let’s start with the JavaScript file app.js where we create a controller ‘MainCtrl’.
Controller
controller file name: app.js
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.cities= [{ 'name': 'New Delhi'}, { 'name': 'Londan'}, { 'name': 'New York'}, { 'name': 'Paris'}, { 'name': 'Tokyo' }, { 'name': 'Munic'}, { 'name': 'Bangkok'}, { 'name': 'Beijing'}, { 'name': 'Shanghai'}, { 'name': 'Los Angeles'}]; });
The controller app.js has the cities model ‘cities’ that is the array of the city names. The cities model contains a property ‘name’ that is for the name of city.
Template
The following is the template (html).
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css" /> <script src="https://code.angularjs.org/1.2.21/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> Search City: <input ng-model="searchterm"> <ul> <li ng-repeat="city in cities | filter:searchterm | orderBy:'name'"> <span>{{city.name}}</span> </li> </ul> </body> </html>
Let us consider the above html template. We are declaring the controller in the body tag. In the next line ng-model directive binds an input element to a property on the scope within controller. This is the two-way binding. Two way binding keeps input box and data model in sync.

Now filter can be applied to repeater directive by providing option filter as filter=model variable. This function will use input’s ng-model value to create new array that will contain filtered value based on matched ng-model value from input box. You can see in the below.

Now we talk about the orderby. You can apply the orderby option in the repeater like as:

Orderby option will sort the ‘cities’ model on the basis of ‘name’ property. And finally angular shows the result according to give options.