title: angular-ui-router with requirejs, lazy loading of controller
body: <p>Could you help me to understand how to load controller in the example below before the view? It looks like the view is loaded just immediately while the controller is not loaded yet.</p>
  
  <pre><code>//app.js
  $stateProvider.state('index', {
      url: "/",
      views: {
          "topMenu": {
              templateUrl: "/Home/TopMenu",
              controller: function($scope, $injector) {
                  require(['controllers/top-menu-controller'], function(module) {
                      $injector.invoke(module, this, { '$scope': $scope });
                  });
              }
          }
      }
  });
  
  //top-menu-controller.js
  define(['app'], function (app) {
      app.controller('TopMenuCtrl', ['$scope', function ($scope) {
          $scope.message = "It works";
      }]);
  });
  
  //Home/TopMenu
  &lt;h3&gt;TopMenu&lt;/h3&gt;
  &lt;div ng-controller="TopMenuCtrl"&gt;
      {{message}}
  &lt;/div&gt;
  </code></pre>