<!DOCTYPE html>
<html ng-app="maddyApp">

<head>
  <!--load bootstrap for styling -->
  <link data-require="bootstrap-css@3.1.0" data-semver="3.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
  <!-- load angular.js -->
  <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
  <!-- in the script.js our all angular code -->
  <script src="script.js"></script>
</head>

<body>
  <div class="container" ng-controller="SearchingCtrl">
    <div class="jumbotron">
      <img src="http://tech-blog.maddyzone.com/uploads/2013/10/maddyzone-logo-300x72.png">
      <br/>
      <h1>Basic Searching With a specific attribute in  AngularJS</h1>
      <br/>
    </div>



    <form>
      <label>Search With Category Name</label>
      <input type="text" ng-model="search" Placeholder ="write category name" />
    </form>

    <table class="table">
      <thead>

        <tr>
          <th colspan=3 align="center">
            Search With Category  <i>"{{search }}"</i>
          </th>
        </tr>
        <tr>
          <th>
            S.N.
          </th>
          <th>
            Title (click on link to view)
          </th>
          <th>Category</th>
        </tr>

      </thead>
      <tbody>

        <tr ng-repeat="(key,value) in articleList | filter:{category:search}">
          <td>
            {{$index + 1}}
          </td>

          <td>
            <a ng-href="value.link" target="_blanck">{{ value.title }}</a>
          </td>

          <td>
            <label class="label label-info">{{value.category }}</label>
          </td>
        </tr>
        
        <tr ng-show="(articleList | filter:{category:search}).length == 0">
          
          <td colspan="3">
            <p>oops ! No Article found with this Category search</p>
          </td>
        </tr>
      </tbody>

    </table>
  </div>

  See Full Article at <a href="http://tech-blog.maddyzone.com/angularjs/basic-searching-in-angularjs">Basic searching in AngularJS</a>
</body>

</html>
// Code goes here
var maddyApp= angular.module("maddyApp",[]);

maddyApp.controller('SearchingCtrl',['$scope',function($scope){
  // here we set some article data with title ,link and category of Maddyzone site :)
  $scope.articleList=[
    {
      'title':'conditionally apply classes in angularjs',
      'link':'http://tech-blog.maddyzone.com/javascript/conditionally-apply-classes-in-angularjs',
      'category':'Angular'
    },{
      'title':'Dynamic routing with AngularJS',
      'link':'http://tech-blog.maddyzone.com/javascript/dynamic-routing-angularjs',
      'category':'Angular'
    },{
      'title':'How to use multiple ng-view in a single page',
      'link':'http://tech-blog.maddyzone.com/javascript/use-multiple-ng-view-single-page',
      'category':'Angular'
    },{
      'title':'How to Setup Node.js on Amazon EC2',
      'link':'http://tech-blog.maddyzone.com/resources/how-to-setup-node-js-amazon-ec2',
      'category':'Node'
    },{
      'title':'How to add Google search in our website',
      'link':'http://tech-blog.maddyzone.com/resources/add-google-search-website',
      'category':'Google'
    }
    ];
  
}]);
/* Styles go here */

Basic Searching With a specific attribute in  AngularJS