Second controller won't work in my angular js

Question

I search all on how to have two controllers, but it won't work. Is there anything wrong in my HTML? Is there anything wrong in my script?

Javascript code:

<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 CODE:

<!--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

See the angularjs doc

• only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
• To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
• AngularJS applications cannot be nested within each other.
• Do not use a directive that uses transclusion on the same element as ngApp. This includes directives such as ngIf, ngInclude and ngView. Doing this misplaces the app $rootElement and the app's injector, causing animations to stop working and making the injector inaccessible from outside the app.