how to prevent error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'

Question

using angular-meteor v 0.9

trying to get a pre-packaged AngularMeteor-SmartAdmin example app to load properly

Getting error:

Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'

Is there a way to figure out why and where this error occurs?

Here is my meteor listing:

angular:angular-animate                               1.4.0  AngularJS (official) release. For full...
angular:angular-cookies                               1.4.0  AngularJS (official) release. For full...
angular:angular-resource                              1.4.0  AngularJS (official) release. For full...
angular:angular-route                                 1.4.0  AngularJS (official) release. For full...
angular:angular-sanitize                              1.4.0  AngularJS (official) release. For full...
angularui:angular-ui-router                           0.2.15  angular-ui-router (official): Flexibl...
angularui:ui-utils                                    0.2.4  Angular-ui-utils package for meteor.
autopublish                                           1.0.3  Publish the entire database to all cli...
cfs:http-methods                                      0.0.29  Adds HTTP.methods RESTful
gsklee:ngstorage                                      0.3.0  ngStorage package for Meteor
http                                                  1.1.0  Make HTTP calls to remote servers
insecure                                              1.0.3  Allow all database writes by default
less                                                  1.0.14  The dynamic stylesheet language
meteor-platform                                       1.2.2  Include a standard set of Meteor packa...
planettraining:angular-translate                      2.7.0  Angular Translate
planettraining:angular-translate-loader-static-files  2.7.0  Angular Translate
planettraining:angular-translate-loader-url           2.7.0  Angular Translate
planettraining:angular-translate-storage-cookie       2.7.0  Angular Translate
planettraining:angular-translate-storage-local        2.7.0  Angular Translate
selchenkov:angular-bootstrap-ui                       0.0.1  Meteor 
urigo:angular             0.9.0  

Answer 1

Issue is with file path of index.ng.html in index.html's ng-include

It should be

<div ng-include="'client/index.ng.html'">
</div>

Path are always absolute , as mentioned in Angular Meteor tutorial

It's very important to note - the paths are always absolute, not relative! so if 'index.ng.html' was inside a client folder, you would have to place the whole path from the route app, doesn't matter where you're calling the file from. like this (e.g. if index.ng.html was in the 'client' folder):

<div ng-include="'client/index.ng.html'"></div>

Answer 2

It's just because you are calling your body or div inappropriately.

Try:

<div ng-app="app1" ng-controller="controller1">
  <!-- code or UI here -->
</div>

This lets the second render inside of it:

<div id="app" ng-app="app2" ng-controller="controller2">
  <!-- code or UI here -->
</div>

So now you could call:

angular.element(document).ready(function () {
    var appID = document.getElementById('app');
    angular.bootstrap(appID, ['app2']);
});

in your angular controller to avoid conflicts between the two controllers. So both the controllers are atomic hence it's being used in one page.