How to load multiple AngularJS applications on a single page

An example of how you might load multiple AngularJS applications on the same page but fully encapsulated from each other.

HTML

<body>
<h1>Application #1</h1>
<hello-mike id="app1" ng-app="app1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

    
</hello-mike>

<h1>Application #2</h1>
<hello-mike id="app2" ng-app="app2">
     
</hello-mike>
</body>

<script>
        angular.module('app1', [])
                .directive('helloMike', function () {
                    return {
                        restrict: 'E',
                        template: '<input type="text" ng-model="name"><p>Hello, {{name}} from application #1!</p>'
                    }
                });
                
                angular.module('app2', [])
                .directive('helloMike', function () {
                    return {
                        restrict: 'E',
                        template: '<input type="text" ng-model="name"><p>Hello, {{name}} from application #2!</p>'
                    }
                });

        angular.bootstrap(document.getElementById('app2'), ['app2'])
    </script>