angularJS 单页面 两个及以上个 ng-app 的处理方式

<div ng-app="myApp1" ng-controller="myCtrl1">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

</div>
<br><br>
<div ng-app="myApp2" ng-controller="myCtrl2">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

</div>
<br><br>
<div ng-app="myApp3" ng-controller="myCtrl3">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

</div>

<script>
    //定义模块应用
    var app = angular.module('myApp1', []);
    //定义控制器应用
    app.controller('myCtrl1', function($scope) {
//        $scope相当于作用域、控制范围，是用来保存Model的对象
        $scope.firstName= "qiu";
        $scope.lastName= "su";
    });


    var app2 = angular.module('myApp2', []);
    //定义控制器应用
    app2.controller('myCtrl2', function($scope) {
//        $scope相当于作用域、控制范围，是用来保存Model的对象
        $scope.firstName= "qiu";
        $scope.lastName= "su";
    });

    //手动地让第二个div被myapp2管理
    angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);

    var app3 = angular.module('myApp3', []);
    //定义控制器应用
    app3.controller('myCtrl3', function($scope) {
//        $scope相当于作用域、控制范围，是用来保存Model的对象
        $scope.firstName= "qiu";
        $scope.lastName= "su";
    });

    //手动地让第三个div被myapp3管理
    angular.bootstrap(document.querySelector('[ng-app="myApp3"]'), ['myApp3']);
</script>