title: AngularJS working with bootstrap navbar for a one-page app
body: <p>I am trying to create a one-page website that loads views in based on buttons clicked on a bootstrap navbar.  However, The content of home.html does not show up.  Can anyone tell me what is going wrong?</p>
  
  <p>Okay, so I have this index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;!-- define angular app --&gt;
  &lt;html ng-app="scotchApp"&gt;
  
  &lt;head&gt;
    &lt;!-- SCROLLS --&gt;
    &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /&gt;
  
    &lt;!-- SPELLS --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;script src="controllers/mainController.js"&gt;&lt;/script&gt;
    &lt;script src="utils/basicUtils.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;!-- define angular controller --&gt;
  &lt;body&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;Angular Routing Example&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; User&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div id="main"&gt;
  
    &lt;!-- angular templating --&gt;
    &lt;!-- this is where content will be injected --&gt;
    &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This app.js:</p>
  
  <pre><code>console.log("abouy to call the /home page and the maincontroller");
  angular.module('scotchApp', ['ngRoute', 'basicUtils']).config(function($routeProvider) {
    $routeProvider
  
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        });
  
  }); 
  </code></pre>
  
  <p>And this home.html:</p>
  
  <pre><code>  &lt;div&gt;
      &lt;form ng-submit = "add(USERID)"&gt;
          User ID:&lt;br&gt;
          &lt;input type = "text" name = "USERID" ng-model = "USERID"&gt;&lt;br&gt;
          &lt;input type = "submit" value = "Submit"&gt;
      &lt;/form&gt;
      &lt;table border="1"&gt;
          &lt;tr&gt;
              &lt;td&gt;{{returnName}}&lt;/td&gt;
              &lt;td&gt;{{AID}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this controller:</p>
  
  <pre><code>angular.module('scotchApp', ['ngRoute', 'basicUtils']).controller('mainController', ['$scope', '$route', '$http', 'AuthTokenService', function($scope, $route, $http, AuthTokenService){
      // create a message to display in our view
      var userurl = '';
      $scope.add = function(USERID) {
          userurl = 'http://dev.hypr.com:8080/DevAPI/rest/uafstats/user/'+USERID; //+USERID;
          var url = 'http://dev.hypr.com:8080/DevAPI/rest/login';
          var data = {userId: USERID};
          var userdata = {userid: USERID};
          var config =
          {
              headers: {
                  'API_KEY': '864d9a941f0520653e51eae4935f6a640256f2f85610d0b281fa26a9dd',
                  'Content-Type': 'application/json'
              }
          };
          var authToken = AuthTokenService.getAuthToken(url, data, config);
  
          var userconfig =
          {
              headers: {
                  'AUTH_TOKEN': authToken,
                  'Content-Type': 'application/json'
              }
          };
          var userPostRequest = $.get(userurl, userdata, userconfig);
          var userjson = '{\"USER_DATA_RETRIEVED\" : \"fail\"}';
          userPostRequest.done(function (userdata) {
              userjson = JSON.stringify(userdata);
              console.log("userjson :: " + userjson);
  
              var postResponse = jQuery.parseJSON(userjson);
              $scope.returnName = postResponse['username'];
              $scope.AID = postResponse['appId']
          });
      };
  }]);  
  </code></pre>