第二个控制器将不能在我的角度js

Question

我搜索所有如何有两个控制器，但它不会工作。我的HTML有什么问题吗？我的脚本中有什么错误吗？

Javascript代码：

<script> 

var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) { 
$scope.products = []; 
$scope.addItem = function() { 
    $scope.errortext = ""; 
    if (!$scope.addMe) {return;} 
    if ($scope.products.indexOf($scope.addMe) == -1) { 
     $scope.products.push($scope.addMe); 
    } else { 
     $scope.errortext = "The item is already in your shopping list."; 
    } 
} 
$scope.removeItem = function (x) { 
    $scope.errortext = ""; 
    $scope.products.splice(x, 1); 
} 
}); 


var topics = angular.module("myList", []); 
topics.controller("topicCtrl", function($scope) { 
$scope.products = []; 
$scope.addItem = function() { 
    $scope.errortext = ""; 
    if (!$scope.addMe) {return;} 
    if ($scope.products.indexOf($scope.addMe) == -1) { 
     $scope.products.push($scope.addMe); 
    } else { 
     $scope.errortext = "The item is already in your shopping list."; 
    } 
} 
$scope.removeItem = function (y) { 
    $scope.errortext = ""; 
    $scope.products.splice(x, 1); 
} 
}); 

angular.bootstrap(document.getElementById("app2"), ['myList']); 

function addElement(value) 
{ 
var dropdown = document.getElementById("OperationType"); 
    var current_value = dropdown.options[dropdown.selectedIndex].value; 

    if (current_value == "Others") { 
     document.getElementById("OperationNos").style.display = "block"; 
    } 
    else { 
    document.getElementById("OperationNos").style.display = "none"; 
} 
} 

function addElement2(value) 
{ 
var dropdown = document.getElementById("topic"); 
    var current_value = dropdown.options[dropdown.selectedIndex].value; 

    if (current_value == "Others") { 
     document.getElementById("usr").style.display = "block"; 
    } 
    else { 
    document.getElementById("usr").style.display = "none"; 
    } 
} 

HTML代码：

<!--STANDARDS --> 
<td> 
    <div ng-app="myShoppingList" ng-controller="myCtrl" id="app1" class="panel panel-default" style="max-width:400px;"> 

    <div class="panel-heading"> 
     <h3> 
      <select name="type" class="form-control" id="OperationType" onchange="addElement(this.value)" name="location"> 
        <option value="Teacher">Teacher</option> 
        <option value="Coordinator">Coordinator</option> 
        <option value="Others">Others</option> 
      </select> 
      <input type="text" id="OperationNos"style="border: none;"class="form-control" placeholder="Input Title" value="{{x}}" > 
     </h3> 
    </div> 

     <div class="panel-body"> 
     <ul class="list-group"> 
      <li ng-repeat="x in products" class="list-group-item"> 
      <input type="text" style="border: none;"class="form-control" value="{{x}}" id="usr"> 
      <span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span> 
      </li> 
     </ul> 
     </div> 

     <div class="panel-footer"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="input-group"> 
       <input type="text" class="form-control" ng-model="addMe" placeholder="Add description"> 
       <span class="input-group-btn"> 
        <button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button> 
       </span> 
       </div> 
      </div> 
      </div> 
      <p class="w3-padding-left w3-text-red">{{errortext}}</p> 
     </div> 
     </div> 
</td> 
<!-- END OF STANDARDS --> 
<!--TOPICS --> 
<td> 
    <div ng-app="myList" ng-controller="topicCtrl" id="app2" class="panel panel-default" style="max-width:400px;"> 

     <div class="panel-heading"> 
     <h3> 
     <select name="type" class="form-control" id="topic" onchange="addElement2(this.value)" name="topic"> 
       <option value="Teacher">Teacher</option> 
       <option value="Coordinator">Coordinator</option> 
       <option value="Others">Others</option> 
       </select> 
     <input type="text" id="topics"style="border: none;"class="form-control" placeholder="Input Title" value="{{y}}" ></h3> 
     </div> 

     <div class="panel-body"> 
     <ul class="list-group"> 
      <li ng-repeat="y in products" class="list-group-item"> 
      <input type="text" style="border: none;"class="form-control" value="{{y}}" id="usr"> 
      <span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span> 
      </li> 
     </ul> 
     </div> 

     <div class="panel-footer"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="input-group"> 
       <input type="text" class="form-control" ng-model="addMe" placeholder="Add description"> 
       <span class="input-group-btn"> 
        <button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button> 
       </span> 
       </div> 
      </div> 
      </div> 
      <p class="w3-padding-left w3-text-red">{{errortext}}</p> 
     </div> 
     </div> 
</td> 
<!-- END OF TOPICS --> 

Answer 1

见angularjs文档仅

• 一个 AngularJS应用可每个HTML文档自动引导。在文档中找到的第一个ngApp将用于定义根元素作为应用程序自动引导。
• 要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap代替手动引导它们。
• AngularJS应用程序不能相互嵌套。
• 请勿使用与ngApp使用相同元素上的transclusion的指令。这包括诸如ngIf，ngInclude和ngView之类的指令。这样做会使应用程序$ rootElement和应用程序的注入器错位，导致动画停止工作，从应用程序外部无法访问注入器。