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>