Bind data on view using ng-repeat in angularJs

Table of Content

  • Background
  • What is ng-repeat
  • Sytax
  • Example

Before reading this article, I highly recommended reading my previous article on angularJS.


When we are using any technology all of us doing one thing which is common that list record on our view no matter what technology we use. So in this article I am going to bind data on view using ng-repeat.

What is ng-repeat

ng-repeat is nothing but it’s loop in our respective technology. According to angular official “The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item.”


<tr ng-repeat="data in dataList">
       <td ng-bind="data.Name"></td>
       <td ng-bind="data.Email"></td>
       <td ng-bind="data.Phone"></td>


I am going to create a MVC 5 empty project and name it AngularWithMVC.


After creating a project lets add angularjs using nuget package. You can install angularjs core.


Note: It’s better to install angularjs core.

After that add the bootstrap.

Add a controller and name it HomeController.



using System.Web.Mvc;

namespace AngularWithMVC.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            return View();

        public JsonResult JsonValue()
            var data = new[]{ new {Name="Pramod",Email="",Phone="987654321"},
             new {Name="Prem",Email="",Phone="123456789"},
             new {Name="Ram",Email="",Phone="9811234343"},
             new {Name="Shyam",Email="",Phone="9889657454"},
             new {Name="Jitesh",Email="",Phone="9535468899"},
             new {Name="Rashmi",Email="",Phone="965453532453"},
             new {Name="Sumit",Email="",Phone="9098867456343"},
             new {Name="Awashesh",Email="",Phone="342658678574"}
            return Json(data, JsonRequestBehavior.AllowGet);

Add a shared and home folder in views folder. Add _layout.cstml in shared folder for layout(master page).


<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/angular.min.js"></script>
            <div class="row" style="padding-left:20px;"><h1>ng-repeat in AngularJS</h1></div>
            <div class="row" style="padding-left:20px;"><p>© @DateTime.Now.Year - My ASP.NET MVC Application With AngularJS</p></div>

Add a folder called Data in Scripts folder and in data folder add a javascript file data.js


var myApp = angular.module('myModule', []);
myApp.controller('myController', function ($scope, $http) {
    $scope.dataList = [];
    $http.get('/Home/JsonValue').success(function (response) {
        if (response != null || response != "undefined"){
            $scope.dataList = response;

Add a view and name it Index and in this view call _layout.cshtml.


    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_layout.cshtml";
<script src="~/Scripts/Data/Data.js"></script>
<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table" style="width:600px">
            <tr ng-repeat="data in dataList">
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>

Let’s run and see the output.



Hope this article is helpful.

Tags: , , ,