Hi rani
In AngularJS routing is what allows you to create (SPA) Single Page Applications.
Single page applications or SPA are web applications that load a single HTML page and dynamically update the page based on the user interaction with the web application.
AngularJS routes enable you to create different URLs for different content in your application.
AngularJS routes allow one to show multiple contents depending on which route is chosen.
A route is specified in the URL after the # sign.
If you want to navigate to different pages in your application but you want the application to be a SPA with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
Check this example. Now please take its reference and correct your code.
HTML
Default Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", ["ngRoute"]);
app.controller("MyController1", ['$scope', function ($scope) {
$scope.Greeting = "Controller 1";
} ]);
app.controller("MyController2", ['$scope', function ($scope) {
$scope.Greeting = "Controller 2";
} ]);
app.controller("MyController3", ['$scope', function ($scope) {
$scope.Greeting = "Controller 3";
} ]);
app.controller("MyController4", ['$scope', function ($scope) {
$scope.Greeting = "Controller 4";
} ]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "Main.htm",
controller: 'MyController1'
}).when("/Red", {
templateUrl: "Red.htm",
controller: 'MyController2'
}).when("/Green", {
templateUrl: "Green.htm",
controller: 'MyController3'
}).when("/Blue", {
templateUrl: "Blue.htm",
controller: 'MyController4'
});
} ]);
</script>
</head>
<body>
<div ng-app="MyApp">
<ul>
<li><a href="#/!">Main</a></li>
<li><a href="#!Red">Red</a></li>
<li><a href="#!Green">Green</a></li>
<li><a href="#!Blue">Blue</a></li>
</ul>
<hr />
<div ng-controller="MyController1"></div>
<div ng-controller="MyController2"></div>
<div ng-controller="MyController3"></div>
<div ng-controller="MyController4"></div>
<div ng-view></div>
</div>
</body>
</html>
Main.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<h3>{{Greeting}}</h3>
This is Main page content.
</div>
</body>
</html>
Red.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background-color: Red; color: White;">
<h3>{{Greeting}}</h3>
This is Red page content.
</div>
</body>
</html>
Green.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background-color: Green; color: White;">
<h3>{{Greeting}}</h3>
This is Green page content.
</div>
</body>
</html>
Blue.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background-color: Blue; color: White;">
<h3>{{Greeting}}</h3>
This is Blue page content.
</div>
</body>
</html>
Screenshot
For more details on Routing refer below links.
AngularJS Routing
Routing In AngularJS
