Hi rani,
$rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app.
Hence it acts like a global variable. All other $scopes are children of the $rootScope.
Check this example. Now please take its reference and correct your code.
HTML
<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">
var app = angular.module('MyApp', []);
app.controller('MyController1', function ($scope, $rootScope) {
$rootScope.Message = 'Welcome to ';
$scope.Name = 'ASPForums.';
});
app.controller('MyController2', function ($scope, $rootScope) {
$rootScope.Greeting = $rootScope.Message;
$scope.Message = 'ASPSnippets.';
});
</script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MyController1">
{{Message}} {{Name}}
</div>
<hr />
<div ng-controller="MyController2">
{{Greeting}} {{Message}}
</div>
</div>
</body>
</html>
Demo
