How to append a new table row in AngularJS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we will see how to insert or append the new table row in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the push() method to insert the new rows into the array. This array will be served as the content to the <tr> element. The ng-repeat directive is used to serve the content of the array to the table cells. Example 1: In the first example, a single column table is used and the content is stored in the array in the form of its element. HTML <!DOCTYPE html> <html> <head> <title> Appending a new table row in AngularJS </title> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.rows = ['row-1', 'row-2']; $scope.c = 2; $scope.addRow = function () { $scope.c++; $scope.rows.push('row-' + $scope.c); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to append a new table row in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <button ng-click='addRow()'> Click to add </button><br><br> <table style="border: 1px solid black; margin: 0 auto;"> <tr> <th>Col-1</th> </tr> <tr ng-repeat="val in rows"> <td>{{val}}</td> </tr> </table><br> </div> </div> </body> </html> Output: Example 2: In this example, a table of three columns is used which stores the content of the table in the format of Object. HTML <!DOCTYPE html> <html> <head> <title> Appending a new table row in AngularJS </title> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.rows = [ { 'ff': '11', 'fs': '12', 'ft': '13' }, { 'ff': '21', 'fs': '22', 'ft': '23' } ]; $scope.c = 2; $scope.addRow = function () { $scope.c++; $scope.rows.push({ 'ff': $scope.c + '1', 'fs': $scope.c + '2', 'ft': $scope.c + '3' }); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to append a new table row in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <button ng-click='addRow()'> Click to add </button><br> <br> <table style="border: 1px solid black; margin: 0 auto;"> <tr> <th>Col-1</th> <th>Col-2</th> <th>Col-3</th> </tr> <tr ng-repeat="val in rows"> <td>{{val.ff}}</td> <td>{{val.fs}}</td> <td>{{val.ft}}</td> </tr> </table><br> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Interview Preparation For Software Developers P PranchalKatiyar Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like