title: Nest/Share Angular applications
body: <p>I have 2 list of items say, news and people. </p>
  
  <p>These 2 lists have different logic and are located in different pages, so don't share shame <code>ng-app</code>: </p>
  
  <pre><code>&lt;!-- News.html --&gt;
  &lt;div id="newsList" ng-app="newsListApp"&gt;
     &lt;div id="{{news.id}}" ng-app="modalApp" ng-repeat="news in newsList"&gt;
        ...
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- People.html --&gt;    
  &lt;div id="peopleList" ng-app="peopleListApp"&gt;
     &lt;div id="{{person.id}}" ng-app="modalApp" ng-repeat="person in people"&gt;
        ...
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to open each item in a modal popup, so I have to use a <code>modalApp</code>, but I want to use <strong>the same <code>modalApp</code></strong>(that will use <em>the same</em> popup template) in the <code>news</code> and <code>people</code> lists... </p>
  
  <p>What is the concept of sharing angular application/modules in cases like this?</p>