title: Rendering a component with Angular UI Router
body: <p>I can't seem to get my 'nameDisplay' component to display when I change the url to '/nameDisplay'. It doesn't display any error, it just doesn't insert the template into the ui-view. If I use template in the 'state' instead of component then it works otherwise it displays nothing.</p>
  
  <p>The versioning I'm using is:
       angular - 1.5.8
       angular ui router - 0.3.1</p>
  
  <pre><code>angular.module('app.nameDisplay', [uiRouter])
  .component('nameDisplay', {
      controller: function(){
          this.name = "Keir Beckett";
          this.age = 24;
          this.changeInfo = function(){
              this.name = "Golash Bista";
              this.age = 66;
          }
      },
      template: "" +
          "&lt;div&gt;" +
              "&lt;h2&gt;{{$ctrl.name}}&lt;/h2&gt;" +
              "&lt;h4&gt;{{$ctrl.age}}&lt;/h4&gt;" +
              "&lt;button ng-click='$ctrl.changeInfo()'&gt;Change Info&lt;/button&gt;" +
          "&lt;/div&gt;"
  }).config(($stateProvider, $urlRouterProvider) =&gt; {
      $stateProvider.state('nameDisplay', {
          url: '/nameDisplay',
          component: 'nameDisplay'
      })
      .state("otherDisplay", {
          url: '/otherDisplay',
          template: '&lt;h1&gt;Other Display&lt;/h1&gt;'
      });
      $urlRouterProvider.otherwise('/');
  })
  .name;
  </code></pre>