Hi rani,
Refer below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS Nested Controller</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
app = angular.module('MyApp', [])
app.controller("CustomerController", function () {
this.Message = 'This is Customer Controller';
this.Customers = [
{ Id: 1, Name: "John Hammond", Country: "United States" },
{ Id: 2, Name: "Mudassar Khan", Country: "India" },
{ Id: 3, Name: "Suzanne Mathews", Country: "France" },
{ Id: 4, Name: "Robert Schidner", Country: "Russia" }
];
});
app.controller("EmployeeController", function () {
this.Message = 'This is Employee Controller';
this.Employees = [
{ Id: 1, Name: "Nancy Davolio" },
{ Id: 2, Name: "Andrew Fuller" },
{ Id: 3, Name: "Janet Leverling" },
{ Id: 4, Name: "Margaret Peacock" }
];
});
</script>
</head>
<body>
<div ng-app='MyApp' ng-controller='CustomerController as Customer'>
<div class='container'>
<h1>{{Customer.Message}}</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="customer in Customer.Customers">
<tr>
<td>{{customer.Id }}</td>
<td>{{customer.Name }}</td>
<td>{{customer.Country }}</td>
</tr>
</tbody>
</table>
<hr />
<div ng-controller='EmployeeController as Employee'>
<h2>{{Employee.Message}}</h2>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody ng-repeat="employee in Employee.Employees">
<tr>
<td>{{employee.Id }}</td>
<td>{{employee.Name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Demo
For more details refer below link.
https://www.c-sharpcorner.com/article/angularjs-nested-scopes-and-controllers-as-syntax/
