Angular calculator won't work when I try to add a second, but both work fine separately

Question

I have two calculators I'm trying to create using angular. Both calculators work exactly as I need them to separately, but when combined one always breaks. Am I missing something here?

(If you delete the first version, the second works just fine, but when combined the second always breaks)

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

You cannot use ng-app twice in the same page. If you want multiple ng-app , you must manually bootstrap one of them, like so:

Note: You should not use the ng-app directive when manually bootstrapping your app.

There are a few things to keep in mind regardless of automatic or manual bootstrapping:

While it's possible to bootstrap more than one AngularJS application per page, we don't actively test against this scenario. It's possible that you'll run into problems, especially with complex apps, so caution is advised.

Do not bootstrap your app on an element with a directive that uses transclusion, 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.

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

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