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>