angularjs - How to run two separate Angular js apps in the same page -

new angular. feel i'm missing obvious: shouldn't able run separate angularjs apps (modules) in same html page? this:

  <section ng-app="helloworldapp" ng-controller="helloworldcontroller">     hello {{name}}!   </section>    <br />   <section ng-app="mynameisapp" ng-controller="mynameiscontroller">     name {{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 runs first module, while second doesn't appear anything. want can build reusable, encapsulated directives multiple pages don't have name modules same thing.

live example: http://plnkr.co/edit/ce6i3oukz8seqea5h3vj

---

we ended building small hierarchy of modules, original question can done, bit of work (see below).

it possible, requires little bit coding hand. need bootstrap angular apps on own. don't worry, not complicated

• do not add ng-app attributes in html
• make sure can fetch dom elements holding app
• when dom loaded need start apps on own: angular.bootstrap( domelement, ['appname']);

fork of plunker works: http://plnkr.co/edit/c5zwomoah2jhyhr5cktp