Угловой калькулятор не будет работать, когда я пытаюсь добавить секунду, но оба прекрасно работают отдельно

Question

У меня есть два калькулятора, которые я пытаюсь создать, используя угловой.Оба калькулятора работают точно так же, как они нужны мне по отдельности, но при объединении один всегда ломается.Я что-то здесь упускаю?

(Если удалить первую версию, вторая работает просто отлично, но при объединении вторая всегда ломается)

Calc Demo: https://codepen.io/aeveritt84/pen/pKPxEP

 //======================First==========================

    (function() {
      var myApp = angular.module("myApp", []);
      myApp.controller("myController", ["$scope", myController]);
      var events = [
        {
          name: "Adults",
          cost: 485,
          itemTotal: 0
        },
        {
          name: "Kids 13-18",
          cost: 394,
          itemTotal: 0
        },
        {
          name: "Kids 4-12",
          cost: 307,
          itemTotal: 0
        },
        {
          name: "Kids 0-3",
          cost: 100,
          itemTotal: 0
        }
      ];

      function myController($scope) {
        $scope.events = events;
        $scope.quantity = 0; 
        $scope.recalc = function(item, quantity ) {
          item.itemTotal = quantity * item.cost;
           $scope.GrandTotal = 0;
          var sum = 0;
           angular.forEach($scope.events, function(event){
             $scope.GrandTotal = $scope.GrandTotal + event.itemTotal;

             $scope.GrandTotal == NaN ? "custom msg": $scope.GrandTotal;
             // console.log($scope.GrandTotal);
           })

        };
      }
    })();
    //===================End First=====================

    //=====================Second=======================

    (function() {
      var myAppTwo = angular.module("myAppTwo", []);
      myAppTwo.controller("myControllerTwo", ["$scope", myControllerTwo]);
      var eventsTwo = [
        {
          nameTwo: "Adults",
          costTwo: 485,
          itemTotalTwo: 0
        },
        {
          nameTwo: "Kids 13-18",
          costTwo: 394,
          itemTotalTwo: 0
        },
        {
          nameTwo: "Kids 4-12",
          costTwo: 307,
          itemTotalTwo: 0
        },
        {
          nameTwo: "Kids 0-3",
          costTwo: 100,
          itemTotalTwo: 0
        }
      ];

      function myControllerTwo($scope) {
        $scope.eventsTwo = eventsTwo;
        $scope.quantityTwo = 0; 
        $scope.recalcTwo = function(item, quantityTwo ) {
          item.itemTotalTwo = quantityTwo * item.costTwo;
           $scope.GrandTotalTwo = 0;
          var sumTwo = 0;
           angular.forEach($scope.eventsTwo, function(eventTwo){
             $scope.GrandTotalTwo = $scope.GrandTotalTwo + eventTwo.itemTotalTwo;

             $scope.GrandTotalTwo == NaN ? "custom msg": $scope.GrandTotalTwo;
             // console.log($scope.GrandTotal);
           })

        };
      }
    })();

    //======================End Second=======================

Answer 1

Вы не можете использовать ng-app дважды на одной странице.Если вам нужно несколько ng-app, вы должны вручную загрузить один из них, например так:

Примечание: вы не должны использовать директиву ng-app, когда вручнуюСамозагрузка вашего приложения.

Есть несколько вещей, которые следует иметь в виду, независимо от автоматической или ручной загрузки:

Пока это возможночтобы загрузить более одного приложения AngularJS на страницу, мы не проводим активного тестирования по этому сценарию.Возможно, у вас возникнут проблемы, особенно со сложными приложениями, поэтому рекомендуется соблюдать осторожность.

Не запускайте ваше приложение в элементе с директивой, использующей включение, например, ngIf, ngInclude и ngView.Это приводит к смещению приложения $ rootElement и инжектора приложения, в результате чего анимации перестают работать, а инжектор становится недоступным снаружи приложения.

angular.module('myApp2', [])
.controller('MyController2', ['$scope', function ($scope) {
  $scope.greetMe = 'World';
}]);

angular.element(function() {
  angular.bootstrap(document.querySelector(".my-app-2"), ['myApp2']);
});