Rendering a component with Angular UI Router

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.

The versioning I'm using is: angular - 1.5.8 angular ui router - 0.3.1

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: "" +
        "<div>" +
            "<h2>{{$ctrl.name}}</h2>" +
            "<h4>{{$ctrl.age}}</h4>" +
            "<button ng-click='$ctrl.changeInfo()'>Change Info</button>" +
        "</div>"
}).config(($stateProvider, $urlRouterProvider) => {
    $stateProvider.state('nameDisplay', {
        url: '/nameDisplay',
        component: 'nameDisplay'
    })
    .state("otherDisplay", {
        url: '/otherDisplay',
        template: '<h1>Other Display</h1>'
    });
    $urlRouterProvider.otherwise('/');
})
.name;