In this tutorial we will implement search with angular js.We will be creating a custom filter to achieve this and not the default search provided by angular.


So, let’s start with folder structure.

Folder Structure

Here above you can see folder structure with css , js & Json file. in which data.json contains temporary json data to which we will do an ajax call from front-end and display data on screen.

First start with main index html file code,


Ajax Live search using AngularJs | Demo | Cipher Trick

Ajax Live search using AngularJs

  • {{i.title}}

In above code you can see that we have defined ng-app ng-controller to main Body & div  ( i.e : ng-app=”instantsearch” & ng-controller=”instantSearchCtrl ).

And ng-model to search input box ( i.e : ng-model=”searchString” ). that is basically binding the view in to the model.

ng-repeat to li so that will list down the data based on search from input text box. ( i.e : i in items | searchFor:searchString )

  •  i in items : Display list of data which is present in items.
  • searchFor:searchString : Display filtered data which is search from input search box.

Create App module & Controller

First will create App module,


var app = angular.module('instantsearch',[]);

Now controller,


$http.get('data.json').success(function(data, status, headers, config) {
$scope.items =;
}).error(function(data, status, headers, config) {
console.log("No data found..");

By using ajax $http.get() will get data from data.json and assign that data to $scope of items. see above code,

Search Filter


app.filter('searchFor', function(){
return function(arr, searchString){
return arr;
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return result;

We can see that in filter checking Expression & Comparator .

In which we are checking particular search term (i.e : title) and based on that we are returning data and displaying in UI .


    1. Hi,
      If you want find in whole object data. then you just need to add in ng-repeat ‘ng-repeat=”friend in friends | filter:searchText”‘. where “searchText” is ng-model of text input.
      So that will give you results based on id as well.

      1. Hello,

        Thanks for the input but I don’t think I am understanding your suggestion. So if we’re using your example and wanting to do the whole object data search, then wouldn’t I need to change this part “angular.forEach(arr, function(item){
        if(item.title.toLowerCase().indexOf(searchString) !== -1){
        }” to something like
        “angular.forEach(arr, function(item){
        if(item.value.toLowerCase().indexOf(searchString) !== -1){
        }” where item.title changes to item.value to search through the whole data?



  1. Thank you, very clear explenation. This works perfect.
    Do you know how i can search on multiple properties of an object?



  2. great article, but I wanted do the same in angular 2 ! can you please advise how it can be achieved using Angular 2 ?

Leave a Reply

Your email address will not be published. Required fields are marked *