title: How to run two separate Angular js apps in the same page
body: <p>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:</p>
  
  <pre><code>  &lt;section ng-app="HelloWorldApp" ng-controller="HelloWorldController"&gt;
      Hello {{name}}!
    &lt;/section&gt; 
    &lt;br /&gt;
    &lt;section ng-app="MyNameIsApp" ng-controller="MyNameIsController"&gt;
      My Name is {{FirstName}} {{LastName}}!
    &lt;/section&gt; 
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>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';
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Live Example: <a href="http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ" rel="noreferrer">http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ</a></p>
  
  <hr>
  
  <p>We ended up building <a href="https://stackoverflow.com/a/15644492/125275">small hierarchy of modules</a>, however my original question can done, with just a bit of work (see below).</p>