--- title: "How to display data in the table using Angular js" description: "How to display data in the table using Angular js" author: "Manoj Bhatt" published: 2016-03-03 updated: 2016-03-04 canonical: https://www.mindstick.com/forum/34030/how-to-display-data-in-the-table-using-angular-js category: "angular js" tags: ["javascript", "angular js", "angularjs directive", "angularjs scope", "angularjs ng repeat"] reading_time: 2 minutes --- # How to display data in the table using Angular js Hi All,\ I want to display all data of [student table](https://www.mindstick.com/forum/157561/what-is-the-stored-procedure-create-a-procedure-to-find-the-record-by-stu_id-from-the-student-table) with their [name](https://yourviews.mindstick.com/view/87450/how-to-generate-a-brand-name-using-linkedin-comprehensive-guide) and other details in a table using [angular](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) js mvc patterns.Please give me suggestion or example to [display data](https://www.mindstick.com/forum/160249/what-is-the-role-of-the-display-data-annotation-to-display-name-for-a-model-property-in-dot-net-core) using [asp.net mvc](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) 4 Application.\ Thank you. ## Replies ### Reply by Anupam Mishra Hi Manoj,\ If you want to use [MVC](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) pattern in angular js in your [ASP.NET](https://www.mindstick.com/articles/934/default-folders-available-inside-the-asp-dot-net-application-folder) MVC Application Then you will be design Their Model,Controller and view.\ Here we have **[Student](https://www.mindstick.com/articles/157138/student-loan-default-wage-garnishment-and-student-loan)** model is below:\ ![How to display data in the table using Angular js](https://www.mindstick.com/mindstickforums/f3f2a776-ab4f-4c00-b5aa-9ba6e987f566/images/f5ecce16-f956-495d-8587-07f618b23d65.png)\ \ Now, My Model of angular js named **Model.js****\** > var app = angular.module("MyApp", []); > > \ ****\**Controller.js:****\** ``` app.controller("HomeController", function ($scope, myService) { $scope.divStudent = false; GetAllStudent(); //To Get All Records function GetAllStudent() { var getData = myService.getStudents(); getData.then(function (stud) { $scope.Students = stud.data; }, function () { $('#alertcontent').html('Error in getting record'); $('#alertmodal').modal("show"); }); } ``` \ **Service.js:** \ ``` app.service("myService", function ($http) { //get All Student this.getStudents = function () { debugger; return $http.get("Home/GetAll"); }; //get StudentBy Id this.getStudent = function (StudentID) { var response = $http({ method: "post", url: "Home/getStudentByNo", params: { id: JSON.stringify(StudentID) } }); return response; } ``` \ **Home Controller:(ASP.NET 'HomeController')** **\** ![How to display data in the table using Angular js](https://www.mindstick.com/mindstickforums/f3f2a776-ab4f-4c00-b5aa-9ba6e987f566/images/b18ea9f4-5e18-4499-97f9-7aae0ed3064e.png)**\** **\** **Index.cshtml** **\** ```

Student Details Page

Student List

Student ID	First Name	Last Name	Enrollment Date	Actions
{{student.StudentID}}	{{student.FirstName}}	{{student.LastName}}	{{ student.EnrollmentDate.slice(6, -2) \| date:"dd-MMM-yyyy"}}	Edit Delete

``` \ **Output:** **\** ![How to display data in the table using Angular js](https://www.mindstick.com/mindstickforums/f3f2a776-ab4f-4c00-b5aa-9ba6e987f566/images/d0bf344b-f370-4e25-9f2e-483d391f2c24.png)**\** --- Original Source: https://www.mindstick.com/forum/34030/how-to-display-data-in-the-table-using-angular-js Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.