Multiple ng-app not showing on page

Question

I am trying to display a cesium globe with a timestamp and legend in AngularJS. However I only see the timestamp and everything else is blank however if I comment out and move what ng-app is not commented out it will show other divs but I cant get all three to show at the same tim:

<div class="timeStamp" ng-app="myApp">
    <div ng-controller='TimeCtrl'>
        <p>{{ clock | date:'MM-dd-yyyy  HH:mm:ss'}}</p>
    </div>
</div>
<div class="cesium" ng-app="ngCesium" ng-controller="appCtrl as appCtrl">
    <div cesium-directive="" id="cesium" class="cesiumContainer"></div>
</div>
<div ng-app="" class="categoryBox" data-ng-init="planes=['Commercial Planes','Private Planes']">
    Legend
    <li data-ng-repeat="x in planes" ng-style="{ background: x == 'Commercial Planes' ? 'red' : 'blue' }">
        {{x}}
    </li>

</div>

score 0 · Answer 1 · edited May 23 '17 at 10:27

You can use like this:

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="angular.ng-modules.js"></script>
  <script>
  var moduleA = angular.module("MyModuleA", []);
  moduleA.controller("MyControllerA", function($scope) {
    $scope.name = "Bob A";
  });

  var moduleB = angular.module("MyModuleB", []);
  moduleB.controller("MyControllerB", function($scope) {
    $scope.name = "Steve B";
  });
  </script>
</head>
<body>
  <div ng-modules="MyModuleA, MyModuleB">
    <h1>Module A, B</h1>
    <div ng-controller="MyControllerA">
      {{name}}
    </div>
    <div ng-controller="MyControllerB">
      {{name}}
    </div>
  </div>

  <div ng-module="MyModuleB">
    <h1>Just Module B</h1>
    <div ng-controller="MyControllerB">
      {{name}}
    </div>
  </div>
</body>
</html>

Refer the following url it will help for you:

AngularJS Multiple ng-app within a page

Multiple ng-app not showing on page

1 Answers1