如何在angular 1.x中使用多个根元素

我是角js的初学者。我使用角与我的引导网站与共同的页眉和页脚。下面的代码运行良好。

当我试图添加额外的plugin根元素时的问题,比如calendar plugin根元素。我不知道 如何将一个或多个根元素与多个控制器组合 .

任何人都能帮我做到这一点。提前谢谢。

var app = angular.module("myApp", []);
     angular.module('myApp', ['ui.rCalendar']);
     angular.module('myApp').controller('CalendarDemoCtrl', ['$scope', function($scope) {
                    -- --
    }
});

var app = angular.module("myApp", []);

//menu
app.controller("menuController", function($scope) {
  $scope.menus = [  
    {
        title: "Home", 
        action: "/test/1"
    },
    {
        title: "About", 
        action: "about.php"
    },
    {
        title: "Module", 
        action: "#", 
        menus: [
          {
            title: "Calendar",
            action: "calendar.php"
          },
          {
            title: "Submenu 2",
            action: "#"
          }
        ]
    },
    {
        title: "Form", 
        action: "form.php"
    }
]
});

//iconbox   
app.controller('iconBox', function iconBox($scope) {
    $scope.servicebox = [
        {
            "icon"      : "fas fa-shopping-cart",
            "title"     : "ng-app",
            "desc"      : "The ng-app directive tells AngularJS that this is the root element of the AngularJS application. All AngularJS applications must have a root element. You can only have one ng-app directive in your HTML document." 
        },
        {
            "icon"      : "fas fa-desktop",
            "title"     : "ng-controller",
            "desc"      : "The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element." 
        },
        {
            "icon"      : "fas fa-lock",
            "title"     : "$scope",
            "desc"      : "The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller." 
        }
    ];
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>

<header ng-controller="menuController">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top main-nav">
        <div class="container">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav text-uppercase ml-auto">
                    <li ng-repeat="menu in menus" class="nav-item dropdown">
                        <ng-template ng-if="menu.menus.length > 0">
                            <a target="_self" href="{{menu.action}}" class="dropdown-toggle nav-link" data-toggle="dropdown">{{menu.title}}</a>
                            <ul ng-if="menu.menus" class="dropdown-menu">
                                <li ng-repeat="submenu in menu.menus">
                                    <a target="_self" href="{{submenu.action}}" class="dropdown-item">{{submenu.title}}</a>
                                </li>
                            </ul>
                        </ng-template>
                        <ng-template ng-if="menu.menus.length == null">
                            <a target="_self" ng-click="" href="{{menu.action}}" class="nav-link">{{menu.title}}</a>
                        </ng-template>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

</header>

<section class="sectionThree py-5" id="services" ng-controller="iconBox">
    <div class="container py-5">
        <div class="section-header text-center">
            <h3>AngularJS</h3>
            <p>We are always with you to make your project.</p>
        </div>
        <div class="row text-center mt-4">
            <div class="col-md-4 col-lg-4 pb-4 pb-md-0" ng-repeat="serviceitem in servicebox">
                <div class="service-box">
                    <i class="{{serviceitem.icon}}"></i>
                    <h3>{{serviceitem.title}}</h3>
                    <p>{{serviceitem.desc}}</p>
                </div>
            </div>
        </div>
    </div>
</section>