AngularJS: Example – Create table html element using ngRepeat


The following example shows how to draw a table element using the AngularJS ngRepeat.


The example contains the app.js controller and the html page.

The Model ‘cities’ has the collection of the city names with their country name. Please consider below.

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $ = 'World';
  $scope.cities = [{
    city: "NewDelhi",country:"India"
  }, {
    city: "Londan",country:"UK"
  }, {
    city: "NewYork",country:"USA"
  }, {
     city: "Tokyo",country:"Japan"
  }, {
     city: "Moscow",country:"Russia"
  }, {
     city: "Beijing ",country:"China"
  }, {
    city: "New Delhi",country:"India"

The following is the html page where we are using the ng-repeat directive to draw the table html element. We iterates over the cities.


<body ng-controller="MainCtrl">
  <div id="metrodiv" style="float:left;width:200px;">
    <table >
      <tr ng-repeat="key in cities">
        <td>{{$index + 1}}</td><td>{{}}</td>

You can merge the above code and see the results.