In our previous post we had discussed on how to do a Basic Search in AngularJS using built-in angular filter.

Now lets see how to make an advanced search in AngularJS. We split this into two parts. Part 2 will be even more advanced.

WebDesignColors - AngularJS Advanced Search - Part 1



For advanced search we will be using a JSON file to fetch the data. Lets name it as articles.json and have following data in it.

    "title": "Basic search in AngularJS",
    "url": ""
    "title": "AngularJS in 20 minutes",
    "url": ""
    "title": "CSS arrows Sass mixin",
    "url": ""
    "title": "WordPress Plugins",
    "url": ""
    "title": "jQuery Plugins",
    "url": ""

Please note the double quotes for key-value pairs. If you use single quote, angular will throw an error SyntaxError: Unexpected token ' at Object.parse (native)


<!doctype html>
<html ng-app="webdesigncolors">
<title>Advanced Search in AngularJS - Part 1 |</title>
<body ng-controller="wdcAdvancedSearchController">

    <input type="search" ng-model="keyword" placeholder="Search Article" required>
    <input type="submit" value="Search" ng-click="getArticles();">
  <p ng-if="!keyword">{{emptyText}}</p>

    <p>{{articles.length ? articles.length : 0}} record
       <span ng-if="articles.length > 1">s</span> found.
    <article ng-if="articles.length" ng-repeat="article in articles">
      <a href="{{article.url}}">{{article.title}}</a>

  • Specify the ng-app directive and ng-controller.
  • getArticles() function call will get the search result for us.
  • If keyword field is empty {{emptyText}} expression will print a message.
  • If there is any error in fetching the data, {{errorText}} expression will print an error message.
  • {{articles.length}} expression will give us the record searched count.

AngularJS JavaScript

  .module("webdesigncolors", [])
  .controller('wdcAdvancedSearchController', function ($scope, $http) {
    $scope.getArticles = function () {
      if ($scope.keyword === '' || $scope.keyword === undefined) {
        $scope.emptyText = 'Type something to search.';
        .error(function (data, status) {
          $scope.errorText = 'ERROR: Cannot fetch articles.';
        .success(function (data, status) {
          var articles = [];
          data.forEach(function(article) {
            // Search keyword at any place in article title. 
            if (article.title.toLowerCase().indexOf($scope.keyword.toLowerCase()) > -1) {
                title: article.title,
                url: article.url
          if (articles.length) {
            $scope.articles = articles;


You might also like: