AngularJS Tables

In the previous chapter we have learnt about the AngularJS controllers and in this chapter we will be learning about AngularJS filters.

AngularJS Tables

ng-repeatdirective is used to repeat the elements from array and to display elements of array in HTML tables

<tr ng-repeat="student in students">
   <td>{{  }}</td>
   <td>{{ student.marks }}</td>

below are meaning of some of the elements –

Variable Explanation
students Name of array
student Array element used in each iteration Access name of student from array element
student.marks Access marks of student from array element

AngularJS Tables : Examples

AngularJS Tables #1 : Simple Table Example

<!DOCTYPE html>

<script src="angular.min.js"></script>


<div ng-app="" ng-controller="studentController">
<table border="1">
   <tr ng-repeat="student in students">
      <td>{{ }}</td>
      <td>{{ student.marks }}</td>

function studentController($scope) {
    $scope.students = [


Output :

Try it yourself