第二個控制器將不能在我的角度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和應用程序的注入器錯位，導致動畫停止工作，從應用程序外部無法訪問注入器。