title: AngularJS templates not loading/rendering
body: <p>So I'm trying to run an Angular app with a Rails API on Chrome.</p>
  
  <p>I'm trying to render very simple views from their respective controllers.</p>
  
  <p>My users.js controller:</p>
  
  <pre><code>'use strict';
  
  var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
  
  rantlyApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/users', {
        templateUrl: '/views/users.html',
        controller: 'UsersCtrl'
      });
  }])
  .controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('http://localhost:3000/api/users/').success(function(data) {
      $scope.users = data.users;
    });
  
    $scope.foos = ['foo', 'bar', 'baz'];
  }]);
  </code></pre>
  
  <p>users.html view:</p>
  
  <pre><code>&lt;div ng-controller='UsersCtrl'&gt;
    &lt;h1&gt;Users&lt;/h1&gt;
  
    &lt;ul ng-repeat="user in users"&gt;
      &lt;li&gt;{{user.first_name}}&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul ng-repeat="foo in foos"&gt;
      &lt;li&gt;{{foo}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The users page renders fine, and I get all the data I want.  But when I try to load my main page, I get nothing.  No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).</p>
  
  <p>My main.js controller:</p>
  
  <pre><code>'use strict';
  
  var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
  
  rantlyApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '/views/main.html',
        controller: 'MainCtrl'
      });
  }])
  .controller('MainCtrl', ['$scope', function ($scope) {
    $scope.awesomeThings = [
      'foo',
      'bar',
      'baz'
    ];
  
    $scope.addThing = function() {
      $scope.awesomeThings.push($scope.newThing);
      $scope.newThing = '';
    };
  
  }]);
  </code></pre>
  
  <p>main.html view:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
    &lt;form ng-submit='addThing()'&gt;
      &lt;div class="form-horizontal"&gt;
        &lt;input type="text" ng-model="newThing"&gt;
        &lt;input type="submit" value="Add Thing"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;li ng-repeat='thing in awesomeThings'&gt;
      {{thing}}
    &lt;/li&gt;
    &lt;h4&gt;Awesome things: {{awesomeThings}}&lt;/h4&gt;
    &lt;h4&gt;Cool things: {{coolThings}}&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I look at the inspector in the Network tab for the "/users" route, it loads users.html.  This doesn't happen for the "/" route.  I expect it to load main.html, but I get nothing.</p>
  
  <p>The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine.  This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.</p>
  
  <p>index.html:
  (scripts are at the bottom)</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" href="styles/main.css"&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="rantlyApp"&gt;
  
      &lt;header class='nav-header' role='navigation'&gt;
        &lt;div class='content'&gt;
          &lt;a class="navbar-brand" href="#/"&gt;Rantly&lt;/a&gt;
          &lt;nav&gt;
            &lt;a href="#/"&gt;Rants&lt;/a&gt;
            &lt;a href="#/users"&gt;Users&lt;/a&gt;
            &lt;a href="#/styleguide"&gt;Styleguide&lt;/a&gt;
            &lt;a href="#/signup"&gt;Sign Up&lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div class="container"&gt;
        &lt;div ng-view=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID --&gt;
      &lt;script&gt;
      !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
        (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
        r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
      }(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
      ga('create', 'UA-XXXXX-X');
      ga('send', 'pageview');
      &lt;/script&gt;
  
      &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-touch/angular-touch.js"&gt;&lt;/script&gt;
      &lt;!-- endbower --&gt;
      &lt;!-- endbuild --&gt;
  
      &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/services.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/users.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/about.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers.  Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.</p>
  
  <p>Any help is greatly appreciated.  Thanks!</p>