AngularJS - Multiple Modules in Single Page

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Multiple Modules in Single Page</h1>
    <div ng-app="MainModule" ng-controller="ctrlMain">
       Module One:  {{Name}}
   </div>
      <div ng-app="MainModule1" ng-controller="ctrlSecond">
        Module Two:  {{Name}}
    </div>   
  </body>
</html>

// Code goes here

var app= angular.module("MainModule",[]).controller("ctrlMain",function($scope){$scope.Name="Steve";});
var app1= angular.module("MainModule1",[]).controller("ctrlSecond",function($scope){$scope.Name="Job";});

angular.element(function() {
  angular.bootstrap(document, ['MainModule','MainModule1']);
});

/* Styles go here */