<!DOCTYPE html>
<html>
	<head>
    	<title>AngularJS $rootScopes</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
	
    <body ng-app="myNgApp">
 
		<div ng-controller="parentController">
			Website Name: {{controllerName}} <br />
			Website URL : {{message}} <br />
			<div style="margin:10px 0px 10px 20px;" ng-controller="childController">
				Website Name: {{controllerName}} <br />
				Website URL: {{message}} <br />
			</div>
		</div>
		<div ng-controller="siblingController">
			Website Name: {{controllerName}} <br />
			Website URL : {{message}} <br />
		</div>
			
		<script type="text/javascript">
			var ngApp = angular.module('myNgApp', []);
	 
			ngApp.controller('parentController', function ($scope, $rootScope) {
				$scope.controllerName = "Free Time Learning";
				$rootScope.message = "www.freetimelearn.com'";
			});
	 
			ngApp.controller('childController', function ($scope) {
				$scope.controllerName = "Free Time Learn";
			});
	 
			ngApp.controller('siblingController', function ($scope) {
	 
			});
		</script>
        
    </body>
</html>

Output :

Topic : AngularJS $rootScopes