title: Angular routing for Bootstrap content
body: <p>I'm trying to use AngularJS mainly for seamless routing of an already functioning webpage. The idea is simple: / stands for the root (index.html), /detail stands for a detailed view (detail_zerohouse.html). However, even with the app and both controllers defined, all I can get is a weirdly layed out index.html and I can't even get to the detail view, all I get is an 404 Not Found. Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>----------------- main.js ----------------------------
    
  var architectApp = angular.module("architectApp");
  architectApp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/', {
              templateUrl: 'index.html',
              controller: 'indexCtrl'
          }).
          when('/detail', {
              templateUrl: 'detail_zerohouse.html',
              controller: 'detailCtrl'
          }).
          otherwise({
              redirectTo: '/'
          });
  }]);
  
  -------------- indexCtrl.js ----------------------------
    
  architectApp.controller('indexCtrl', function($scope){
  
  });
  
  
  -------------- detailCtrl.js --------------------------
    
  architectApp.controller('detailCtrl', function($scope){
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>-------------------------- root.html ---------------------
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="architectApp"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;AngularJS Root&lt;/title&gt;
  
      &lt;!-- AngularJS--&gt;
      &lt;script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;script src="js/indexCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="js/detailCtrl.js"&gt;&lt;/script&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
          &lt;!-- Google Roboto Font--&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'&gt;
          &lt;!-- Main user stylesheet--&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="//code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
          &lt;!-- Add fancyBox --&gt;
      &lt;link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
          &lt;!-- Optionally add helpers - button, thumbnail and/or media --&gt;
      &lt;link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"&gt;&lt;/script&gt;
          &lt;!-- Media helper Fancybox--&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"&gt;&lt;/script&gt;
          &lt;!-- Thumbs helper Fancybox--&gt;
      &lt;link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap JS--&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;!-- SmoothScroll JS--&gt;
      &lt;script src="js/smooth-scroll.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
  //                initialize SmoothScroll
              smoothScroll.init();
  //                set Fancybox properties
              $(".fancybox").fancybox({
  //                fitToView       : false, opens the image already in fullscreen
                  prevEffect      : 'none',
                  nextEffect      : 'none',
                  closeBtn        : false,
                  closeClick      : true,
                  hideOnOverlayClick : true,
                  helpers     : {
                      title   : { type : 'inside' },
                      buttons : {}
                  }
              });
          });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body class="container-fluid" ng-view&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>------------------------ index.html ------------------------
  
   &lt;nav class="nav  navbar-default" id="navigation"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#"&gt;Peter Danko&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;architektúra &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#navigation"&gt;interiér&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#navigation"&gt;o mne&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt; &lt;!-- end nav --&gt;
  
      &lt;!--&lt;div id="mainWrap" class="container-fluid"&gt;--&gt;
  
          &lt;div class="row tileRow" id="firstRow" style="margin-top: 5px;"&gt;
              &lt;a href="detail.html"&gt;
                  &lt;div class="col-sm-2 tile"&gt;
                          &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;div class="col-sm-2 tile"&gt;
                      &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                      &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                      &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                  &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!-- row end --&gt;
  
          &lt;div class="row tileRow"&gt;
              &lt;div class="col-sm-2 tile"&gt;
                  &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                  &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                  &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                  &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 tile"&gt;
                  &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!-- row end --&gt;
  
  
  
  -----------------------  detail.html  ------------------------------
  
  
   &lt;nav class="nav  navbar-default navbar-top-offset" id="navigation"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#"&gt;Peter Danko&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;architektúra &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#navigation"&gt;budova&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;interiér&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;o mne&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt; &lt;!-- end nav --&gt;
  
  
  
      &lt;!--&lt;div id="mainWrap" class="container-fluid"&gt;--&gt;
  
          &lt;div class="row tileRow" id="firstRow" style="margin-top: 5px;"&gt;
  
              &lt;a href="index.html#navigation"&gt;
                  &lt;div class="col-md-2 tile logoTile"&gt;
                          &lt;img src="img/dummy.png" class="img-responsive" id=""&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
  
              &lt;div class="col-md-6 doubleTile"&gt;
                  &lt;a href="img/zerohouse/7.png" class="fancybox" rel="fancy"&gt;&lt;img src="img/zerohouse/7thumb.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-2 tile"&gt;
                  &lt;a href="img/zerohouse/8text.png" class="fancybox" rel="fancy"&gt;&lt;img src="img/zerohouse/8text.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-2 tile"&gt;
                  &lt;a href="img/zerohouse/8plan.png" class="fancybox" rel="fancy"&gt;&lt;img src="img/zerohouse/8plan.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt; &lt;!-- row end --&gt;
  
          &lt;div class="row tileRow"&gt;
  
              &lt;div class="col-md-2 tile"&gt;
                  &lt;a href="img/zerohouse/11.png" class="fancybox" rel="fancy"&gt;&lt;img src="img/zerohouse/11thumb.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-2 tile"&gt;
                  &lt;a href="img/zerohouse/12.png" class="fancybox" rel="fancy" title="Plan"&gt;&lt;img src="img/zerohouse/12thumb.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-2 tile"&gt;
                  &lt;a href="img/zerohouse/10.png" class="fancybox" rel="fancy"&gt;&lt;img src="img/zerohouse/10thumb.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-6 doubleTile"&gt;
                  &lt;a href="img/zerohouse/9.png" class="fancybox" rel="fancy"&gt;&lt;img src="img/zerohouse/9thumb.png" class="img-responsive" id=""&gt;&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt; &lt;!-- row end --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any help, I've tried everything I could think of but got nowhere.</p>
  
  <pre><code>/
  -/css
  -/fancybox
  -/helpers
  -/img
  -/js
    -detailCtrl.js
    -indexCtrl.js
    -main.js
  -detail_zerohouse.html
  -index.html
  -root.html
  </code></pre>
  
  <p>All .html files are directly in the root folder</p>