AngularJS Multiple ng-app within a page

Question

I have just started learning Angular JS and created some basic samples however I am stuck with the following problem.

I have created 2 modules and 2 controllers.

Answer 1

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);

// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
  $scope.msg = 'App 1';
});

// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
  $scope.msg = 'App 2';
});

// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);

  
  

    

      {{msg}}
    
  

  
  

    

      {{msg}}