AngularJs UI Bootstrap Datepicker not working when used in another angular app

Question

I am using here two ng-apps and controllers. When I try to implement the angular ui bootstrap datepciker it is giving me the following error,

Error: [ng:areq] http://errors.angularjs.org/1.4.4/ng/areq?p0=DatepickerDemoCtrl&p1=not%20a%20function%2C%20got%20undefined

Any how if I remove from "firstApp" div element and place outside it is working. What is going wrong with this code. Can we call one app module in another app module in angularjs.

 <div ng-app="FirstModule" ng-controller="FirstController">

           <div class="" ng-not-bindable ng-app="calPicker" ng-controller="DatepickerDemoCtrl">
                               <p class="input-group">
                                                <label for="date-picker" ng-click="open($event)">Choose a date</label>
                                                <input type="text" class="form-control"
                                                       datepicker-popup="{{format}}"
                                                       ng-model="dt"
                                                       is-open="opened"
                                                       min-date="minDate"
                                                       max-date="'2015-06-22'"
                                                       datepicker-options="dateOptions"
                                                       date-disabled="disabled(date, mode)"
                                                       ng-required="true"
                                                       close-text="Close"
                                                       id="date-picker"
                                                       readonly
                                                       ng-click="open($event)" />
                                                <span class="input-group-btn pull-left">
                                                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                                </span>
                                            </p>
                                        </div>

  </div>

Here is the datetimepicker.js file code

 var calPicker = angular.module("calPicker", ["ui.bootstrap"]);

 calPicker.controller("DatepickerDemoCtrl", ["$scope", function ($scope) {

   // grab today and inject into field
   $scope.today = function() {
  $scope.dt = new Date();
  };

    // run today() function
     $scope.today();

     // setup clear
      $scope.clear = function () {
       $scope.dt = null;
      };

      // open min-cal
     $scope.open = function ($event) {
      alert("hi");
     $event.preventDefault();
       $event.stopPropagation();
       $scope.opened = true;
     };

     // handle formats
     $scope.formats = ["dd-MMMM-yyyy", "yyyy/MM/dd", "dd.MM.yyyy", "shortDate"];

   // assign custom format
     $scope.format = $scope.formats[0];

    }]);

Answer 1

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.

So what you can do here is either you use angular.bootstrap and manually initialize the module. Or you can create top level model and also create two other models with their controllers and then load them as dependencies in the top level model. After that you will have only one ng-app for the top level model.

See also

• ngApp
• angular.bootstrap