title: bootstrap not loading on angular partial page
body: <p>I have this issue with a couple different pages I've been working on. I'll provide a simple example. I'm not very comfortable with front-end work so apologies if my html page is hard to read.</p>
  
  <p>I have an angular single-page application with a header bar that takes up 100px and then partial pages are routed below it.</p>
  
  <p>my <code>index.html</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;base href="/"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"&gt;&lt;/script&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css"&gt;
    &lt;!--&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"&gt;--&gt;
    &lt;link rel="stylesheet" type="text/css" href="./stylesheets/style.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="./stylesheets/index.css"&gt;
  &lt;/head&gt;
  
  &lt;body data-ng-app="angulobby" data-ng-controller="indexController"&gt;
  &lt;div id="container"&gt;
    &lt;header&gt;
      &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="/"&gt;AnguLobby Prototype&lt;/a&gt;
          &lt;/div&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="/"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/login"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; Login&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/register"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt; Register&lt;/a&gt;&lt;/li&gt;
            &lt;div ng-controller="logoutController"&gt;
              &lt;a ng-click='logout()' class="btn btn-default"&gt;Logout&lt;/a&gt;
            &lt;/div&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;!--injected views go here--&gt;
    &lt;div id="ng-view" ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://use.fontawesome.com/7222f42b52.js"&gt;&lt;/script&gt;
  &lt;script src="./socket.io/socket.io.js"&gt;&lt;/script&gt;
  &lt;script src="./main.js"&gt;&lt;/script&gt;
  
  &lt;!--expose angular controllers--&gt;
  &lt;script src="controllers/home.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/index.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/login.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/logout.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/register.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/select-params.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/queueTimer.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/lobby.js"&gt;&lt;/script&gt;
  
  &lt;!--expose angular services--&gt;
  &lt;script src="./services/auth.js"&gt;&lt;/script&gt;
  &lt;script src="./services/gamelist.js"&gt;&lt;/script&gt;
  &lt;script src="./services/queue.js"&gt;&lt;/script&gt;
  &lt;script src="./services/socket.js"&gt;&lt;/script&gt;
  &lt;script src="./services/lobby.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and <code>index.css</code></p>
  
  <pre><code>html, body {
    height: 100%;
  }
  #container {
    height:100%;
    display:flex;
    flex-flow:column;
  }
  
  #ng-view {
    overflow: hidden;
  }
  
  header {
    height: 100px;
  }
  </code></pre>
  
  <p>and then for instance if I have a simple partial page that I would like to inject into ng-view:</p>
  
  <p><code>lobby.html</code></p>
  
  <pre><code>&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="../stylesheets/lobby.css"&gt;
  
  &lt;/head&gt;
  
  &lt;div id="lobby-container" class="container"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div id="chat" class="col-md-2"&gt;
        &lt;/div&gt;
        &lt;div id="users" class="col-md-2"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <code>lobby.css</code></p>
  
  <pre><code>#lobby-container {
    background-color: greenyellow;
    height: 100%;
    width: 100%;
  }
  
  #chat {
    background-color: grey;
    height: 100%;
  }
  
  #users {
    background-color: darkblue;
    height: 100%;
  }
  </code></pre>
  
  <p>When I load the partial page on it's own, no bootstrap is executed.It shows two divs without the col class attributed.
  <a href="https://i.stack.imgur.com/ptMaX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ptMaX.png" alt="enter image description here"></a></p>
  
  <p>But, when I build the project, the bootstrap is loaded. 
  <a href="https://i.stack.imgur.com/PzYsv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PzYsv.png" alt="enter image description here"></a></p>
  
  <p>I understand that the general problem is that the partial views only get the bootstrap added from index.html when angular actually injects them into ng-view. What I would like to do is be able to preview each partial page and have bootstrap loaded already <em>without having to build the project each time</em>. I am using the webstorm IDE if that matters. </p>