title: Angular app/widget on multiple web pages
body: <p>I am building a chat application similar to google hangouts. I have managed to get it right so far. The only problem i am experiencing now is having the angular app/widget run on other pages when i change url's and the app remaining fixed or being restarted on the other web page. how would i have to structure or place the app onto a site. </p>
  
  <p>The app looks like this on my index.html in the angular app. </p>
  
  <p>here is an image: <a href="http://s12.postimg.org/jkgraguod/live_review_one.png" rel="nofollow">http://s12.postimg.org/jkgraguod/live_review_one.png</a></p>
  
  <p>I would now like to have the same app/widget run on another pages after it loads e.g reviews.html</p>
  
  <p>I am using laravel (webservice) for posts and gets. the app is in angular, standalone thus far and i would like to keep it that way. </p>
  
  <p>If you would like me to be more clear please feel free to ask :)  </p>
  
  <p>All Files Added to plunk: <a href="http://plnkr.co/edit/yDoUfw?p=info" rel="nofollow">http://plnkr.co/edit/yDoUfw?p=info</a></p>
  
  <p>code in app.js (routes)</p>
  
  <p>app.config(function($routeProvider) {</p>
  
  <pre><code>    $routeProvider
  
      .when('/chat-rooms', {
          templateUrl: 'partials/chat-rooms.html',
          controller: 'ChatRoomsCtrl'
      })
  
      .when('/chat-room/:chatRoom', {
          templateUrl: 'partials/chat-room.html',
          controller: 'ChatRoomCtrl'
      })
  
      .when('/chat-room-pop/:chatRoom', {
          templateUrl: 'partials/chat-room-pop.html',
          controller: 'ChatRoomCtrl'
      });
  
  });
  </code></pre>
  
  <p>My index.html page. </p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css"&gt;
      &lt;link href="css/hanger.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="chatApp"&gt;
  
      &lt;div class="page-header"&gt;
          &lt;h2&gt;live review single page&lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;div ng-view class="container"&gt;&lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-git2.min.js"&gt;&lt;/script&gt;
      &lt;script src="libs/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="libs/angular-scroll-glue/src/scrollglue.js"&gt;&lt;/script&gt;
      &lt;script src="libs/angular-clear/angular.dcb-clear-input.min.js"&gt;&lt;/script&gt;
      &lt;script src="libs/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="libs/hanger/hanger.js"&gt;&lt;/script&gt;
  
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/chat-rooms.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/chat-room.js"&gt;&lt;/script&gt;
  
      &lt;script src="scripts/services/message.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/services/chat-room.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/services/webservice.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>All Files Added to plunk: <a href="http://plnkr.co/edit/yDoUfw?p=info" rel="nofollow">http://plnkr.co/edit/yDoUfw?p=info</a></p>