angular-ui-router only loads template but not controller not loaded

Question

I tried to migrate my Angular app from using ngRoute to uiRoute. Everything works fine except the controllers. They simple don't load like they did with ngRoute and I don't get why. As I see it from uiRoute it should work like with ngRoute but it doesn't. There is no exception thrown. I also don't find any example for a similar configuration like mine although it's very simple. I home somebody can tell me where my controller is hiding.

http://plnkr.co/edit/VGyi3AxgslgpvwBCTkXI?p=preview

So as for ngRoute the controller should be accessible through 'homepage' but it looks like it's just empty :(

;(function(angular) {
'use strict';

 angular
 .module('MainRouter', ['ui.router'])
 .config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('home', {
      url: '',
      views: {
        "mainView": {
          templateUrl: 'home.html'
        }
      },
      controller: 'HomepageCtrl',
      controllerAs: 'homepage'
    });
 }]);
})(angular);

Answer 1

When you use views option inside the state definition, then ui-router engine doesn't look for templateUrl & controller defined in state level, basically you need to provide controller & templateUrl value from the namedView definition only. In your case you should add controller in mainView definition object.

Code

.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('home', {
      url: '',
      views: {
        "mainView": {
          templateUrl: 'home.html',
          controller: 'HomepageCtrl',
          controllerAs: 'homepage'
        }
      },
    });
}]);

Demo Plunkr