title: Multiple ng-app directives on a page
body: <p>I want to be able to use multiple ng-app="{angular.module}" directives on one page. I want to do this to make the bits of my app more modular. I figure, if I can create angular modules and plug several of them into one document, I could take those modules and plug them into other projects easily. </p>
  
  <p>I have seen people say that you can only use one ng-app directive on your page... is this true? Is it most accurate to say, "one ng-app directive per view"?</p>
  
  <p>I hope this is not the case, or if it is the case that there is still a best way to achieve a high degree of abstract modularity. </p>
  
  <p>Here are my modules/apps and their controllers...</p>
  
  <pre><code>var searchModj = angular.module('searchModule', []);
  
  
  var controllers = {};
  
  controllers.SearchList = function ($scope){
  
      $scope.coworkers = [
              {name: 'Joe Bob', city: 'Ukrainia'},
              {name: 'Adam Blobnovski', city: 'Logan' },
              {name: 'Carlos Sanchez', city: 'Deerbushle'},   
              {name: 'Martin Kellerweller', city: 'Uptown'},
              {name: 'John Doe',  city: 'New York City'}
          ];
  };
  
  searchModj.controller(controllers);
  
  
  
  var fruitModj = angular.module('fruiter', []);
  
  
  
  controllers.SomeFruit = function ($scope) {
  
      $scope.fruits = ['apple', 'banana', 'pear'];
  
  };
  
  fruitModj.controller(controllers);
  </code></pre>
  
  <p>Ok, now here is the relevant part of my markup...</p>
  
  <pre><code>&lt;div ng-app="searchModule"&gt;
  
      &lt;div ng-controller="SearchList"&gt;
  
          Name: 
          &lt;br/&gt;
          &lt;input type="text" ng-model="name" /&gt; 
          &lt;br/&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="coworker in coworkers | filter:name"&gt;{{ coworker.name }} - {{ coworker.city }}&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;p&gt;You are searching for &lt;em&gt;{{ name }}&lt;/em&gt;&lt;/p&gt;
  
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;div ng-app="fruiter"&gt;
      &lt;div ng-controller="SomeFruit"&gt;
  
          &lt;ul&gt;
              &lt;li ng-repeat="fruit in fruits"&gt;{{ fruits }}&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I think because it comes first in the document, my "searchModule" app works and the second app does not. When I comment out the first app, the second works. So it looks like I'm confirming my most unfortunate suspicions. Regardless... if this is the case, then what is the best approach I can bear in mind to make the functionality on my projects as modular as possible?  </p>