This demo shows how to remove/delete a table row dynamically.
Instruction: Delete the row by pressing the delete button. Alternatively, play around by adding and deleting/removing the rows.

Add a Company

Name Employees Head Office Action
{{}} {{company.employees}} {{company.headoffice}}


  • Directive ng-click such as ng-click="removeRow()" is used with input type button element.
  • Directive ng-repeat such as ng-repeat="company in companies" is used with <tr> element for repeating the entries in companies JSON data as different row.
  • Directive ng-controller such as ng-controller="CompanyCtrl" defines the controller with <body> element.
  • $scope.removeRow function is added within CompanyCtrl. The function removes one of the existing element in the companies JSON data using the syntax $scope.companies.splice(i, 1); .
Directive ng-app & ng-controller code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html ng-app="helloApp">
<title>Hello AngularJS - Add Table Row Dynamically</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 ng-click directive on button element

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