AngularJS Multiple ng-app within a single page

Question

Only the first ng-app works: see my plunker

How can I make both app work together? I understand that I should a line to bootstrap the modules, i'm not sure where exactly to add that line.

HTML

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
  <script src="clientsearch.js"></script>
  <script src="datepicker.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">


    <div ng-app="ui.bootstrap.demo">
    <div ng-controller="DatepickerDemoCtrl">
        <div class="row">
           <div class="col-md-6">
                <label for="appointment_start">Appointment start:</label>
                <p class="input-group">
                  <input type="text" id="appointment_start" name="appointment_start" class="form-control" readonly datepicker-popup="{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
                </p>

           </div>
      </div>
    </div> <!-- ng-controller -->
    </div> <!-- ng-app -->



    <div id="appclientcomplete" ng-app="ui.bootstrap.clientautocomplete">
    <div ng-controller="TypeaheadCtrl">
     <div class="row">
        <h4>Static arrays</h4>
        <pre>Model: {{selected | json}}</pre>
        <input type="text" placeholder="Type client's name, address or phone number" ng-model="selected" typeahead="client as client.first_name + ' ' + client.last_name + ' ' + client.address_1 + ' ' + client.address_2 + ' ' + client.city  for client in clients | filter:$viewValue | limitTo:8" class="form-control">
      </div>
    </div> <!-- ng-controller -->
    </div> <!-- ng-app -->


    </div>  
</body>

datepicker.js

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('DatepickerDemoCtrl', function ($scope) {


});

clientsearch.js

angular.module('ui.bootstrap.clientautocomplete', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.clientautocomplete').controller('TypeaheadCtrl', function($scope, $http) {


});

Explosion Pills · Accepted Answer · 2015-09-14 18:24:09Z

1

If I'm not mistaken, Angular will only bootstrap the first ng-app it encounters. You should only use one app (module) but you can easily create a module that uses the other two modules.

angular.module("app", ["ui.bootstrap.demo", "ui.bootstrap.clientautocomplete"]);

ng-app="app"

answered Sep 14, 2015 at 18:24

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3489502 Over a year ago

It worked, added <script>angular.module("app", ["ui.bootstrap.demo", "ui.bootstrap.clientautocomplete"]);</script> to HEAD and ng-app="app" to BODY. Thanks!

Collectives™ on Stack Overflow

AngularJS Multiple ng-app within a single page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest