How to run two separate Angular js apps in the same page
angularjs
Solution
It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated
- Do not add `ng-app` attributes in your HTML
- Make sure you can fetch the DOM elements holding the app
- When DOM is loaded you need to start the apps on your own: `angular.bootstrap( domElement, ['AppName']);`
Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp
Problem
New to Angular. I feel like I'm missing something obvious: Shouldn't I easily be able to run to separate AngularJs apps (modules) in the same html page? Something like this: ``` <section ng-app="HelloWorldApp" ng-controller="HelloWorldController"> Hello {{name}}! </section> <br /> <section ng-app="MyNameIsApp" ng-controller="MyNameIsController"> My Name is {{FirstName}} {{LastName}}! </section> ``` Javascript: ``` var HelloWorldApp = angular.module('HelloWorldApp', []); HelloWorldApp.controller('HelloWorldController', function($scope) { $scope.name = 'World'; }); var MyNameIsApp = angular.module('MyNameIsApp', []); MyNameIsApp.controller('MyNameIsController', function($scope) { $scope.FirstName = 'John'; $scope.LastName = 'Smith'; }); ``` This only runs the first module, while the second doesn't appear to do anything. I want to do this so that I can build reusable, encapsulated directives for multiple pages that don't have to name their modules the same thing. Live Example: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ We ended up building small hierarchy of modules, however my original question can done, with just a bit of work (see below).