Hi rani,
Only one app is automatically initialized. Others have to manually initialized as follows.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app1 = angular.module('MyApp1', [])
app1.controller('MyController1', function ($scope) {
$scope.Greetings = 'Welcome to aspsnippets.com';
});
var app2 = angular.module('MyApp2', ['MyApp1'])
app2.controller('MyController2', function ($scope) {
$scope.Greetings = 'Welcome to aspforums.net';
});
var app3 = angular.module('MyApp3', ['MyApp1'])
app3.controller('MyController3', function ($scope) {
$scope.Greetings = 'Welcome to jqueryfaqs.com';
});
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById('dvApp'), ['MyApp2', 'MyApp3']);
});
</script>
</head>
<body>
<div id="dvApp">
<div ng-controller="MyController1">
{{Greetings}}
</div>
<hr />
<div ng-controller="MyController2">
{{Greetings}}
</div>
<hr />
<div ng-controller="MyController3">
{{Greetings}}
</div>
</div>
</body>
</html>
Demo
