Multiple Module in One Angular

<html ng-app="app2">
  <head>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
    <script>
      var app = angular.module('app', []);
      app.directive('myDirective', function() {
         var directive = {};
         directive.restrict = 'A';
         directive.template = "<h4>Using Directive from injected module</h4>";
         return directive;
      });
      app.controller('secondCtrl', function($scope) {
        $scope.name = 'Using Controller from injected module';
      });
      
      var app2 = angular.module('app2',['app']);
      app2.controller('MainCtrl', function($scope) {
        $scope.name = 'Original Module';
      });
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p my-directive>This is replaced by directive</p>
    <div ng-controller="secondCtrl">
      {{name}}
    </div>
  </body>
</html>