title: Multiple AngularJS apps in a single page
body: <p>I have the following 2 apps in a single page</p>
  
  <h3>Navbar Module</h3>
  
  <p>Located in the navbar of the page. Is included in every page of the application via the master layout file (im using laravel). Contains Search functionality + Navbar functions like (logout, login) etc.</p>
  
  <h3>Posts Module</h3>
  
  <p>Displayed only in the Dashboard page of the applications. Basically loads and display posts from backend.</p>
  
  <p>Currently both are two seperate apps and i load them using <code>angular.bootstrap</code>. Both of the apps need to use a common service, <code>UserService</code>. Which basically loads the logged in user details. This is part of a different module, say <code>myapp.utils</code>. This service will parse data from html tags and build a User object ready for the consumers (Posts &amp; Navbar apps). But when i inject the service into both apps, the User object is build twice. Which is what i don't want. For the below code, i could see the log printed twice in console.</p>
  
  <pre><code>.factory('UserService', function(){
      console.log("Initing UserService");
  
      return {
          'User':...
      }
  })
  </code></pre>
  
  <p>I can't merge both app into a single bigger module, just because both modules are declared in two different blade templates (server view files). </p>
  
  <p>Kindly suggest an alternate strategy.</p>