title: Angular-ui-router not showing errors or any content
body: <p>I'm working through this tutorial, <a href="https://ui-router.github.io/tutorial/ng1/hellosolarsystem" rel="nofollow">https://ui-router.github.io/tutorial/ng1/hellosolarsystem</a>, in order to set up a one-page application with angular &amp; angular-ui-router. I had some errors early on, but fixed them, and now I'm not getting any errors at all, but nothing is showing up, except the header.</p>
  
  <p>I can click between the nav links, but the expected content isn't showing, there's also no errors.</p>
  
  <p>Here's my html:</p>
  
  <blockquote>
    <p>index.html</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="ext-js/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="ext-js/angular-ui-router.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="js/s.js"&gt;&lt;/script&gt;
          &lt;script src="home_component.js"&gt;&lt;/script&gt;
  
          &lt;style&gt;.active { font-weight: bolder; }&lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body ng-app="CarSites"&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" ui-sref="Home" ui-sref-active="active"&gt;Car Suite&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;
                          &lt;a ui-sref="Mongo" ui-sref-active="active"&gt;Mongo&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;div id="main"&gt;
              &lt;ui-view&gt;&lt;/ui-view&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to switch between templates as a user clicks on the navigation links. Here's the javascript:</p>
  
  <blockquote>
    <p>s.js</p>
  </blockquote>
  
  <pre><code>var myApp = angular.module('CarSites', ['ui.router']);
  
  myApp.config(function($stateProvider) {
    states = [
    {
      name: 'Home',
      url: '',
      component: 'home'
    },{
      name: 'Mongo',
      url: '/Mongo',
      template: '&lt;h3&gt;Mongo&lt;/h3&gt;'
    }];
  
    // Loop over the state definitions and register them
    states.forEach(function(state) {
      $stateProvider.state(state);
    });
  });
  </code></pre>
  
  <p>The issue started after I changed states from being registered individually to registered in a loop, so I think this issue has something to do with that.</p>
  
  <blockquote>
    <p>home_compenent.js: </p>
  </blockquote>
  
  <pre><code>angular.module('CarSites').component('home', {
      template:  '&lt;h3&gt;{{$ctrl.greeting}} Home!&lt;/h3&gt;' +
               '&lt;button ng-click="$ctrl.toggleGreeting()"&gt;toggle greeting&lt;/button&gt;',
  
      controller: function() {
          this.greeting = 'hello';
  
          this.toggleGreeting = function() {
              this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
          }
      }
  });
  </code></pre>
  
  <p>So on the Home page I would expect to see: </p>
  
  <blockquote>
    <p>hello Home! (button)</p>
  </blockquote>
  
  <p>But nothing is showing and there are no errors. I'm an angular noob so I think this is a really simple issue, but I have poured through the code and don't see anything wrong. Does anyone see my issue?</p>