This demo shows how to search the table for any keyword
Instruction: Type search keyword in Search field and check the tables changing based on the search result. The details could be found on AngularJS Filtering Repeaters tutorial page. Try playing with all the functions such as add, remove and search.
Name Employees Head Office Action
{{}} {{company.employees}} {{company.headoffice}}

Add a Company


  • Filter such as "filter: searchKeyword" is applied on the value of ng-repeat directive with a pipe, "|". searchKeyword is model associated with search input textfield
Directive ng-app & ng-controller code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html ng-app="helloApp">
<title>Hello AngularJS - Search Table - Filter Example</title>
<link rel="stylesheet"
<script src="assets/js/controllers.js"></script>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
Controller CompanyCtrl code in controller.js
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [
                    { 'name':'Infosys Technologies',
                    	'employees': 125000,
                    	'headoffice': 'Bangalore'},
                    	{ 'name':'Cognizant Technologies',
	                    	'employees': 100000,
	                    	'headoffice': 'Bangalore'},
	                    	{ 'name':'Wipro',
		                    	'employees': 115000,
		                    	'headoffice': 'Bangalore'},
		                    	{ 'name':'Tata Consultancy Services (TCS)',
			                    	'employees': 150000,
			                    	'headoffice': 'Bangalore'},
			                    	{ 'name':'HCL Technologies',
				                    	'employees': 90000,
				                    	'headoffice': 'Noida'},
$scope.addRow = function(){		
	$scope.companies.push({ 'name':$, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
$scope.removeRow = function(name){				
		var index = -1;		
		var comArr = eval( $scope.companies );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
		if( index === -1 ) {
			alert( "Something gone wrong" );
		$scope.companies.splice( index, 1 );		
Directive ng-repeat & ng-click code

Pay attention to filter keyword applied on the value of ng-repeat directive

<table class="table">
		<th>Head Office
	<tr ng-repeat="company in companies  | filter: searchKeyword ">
		<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow("/>
comments powered by Disqus