title: lazy loading angularjs controllers with ui-router resolve
body: <p>I'm trying to get to work angular.js, ui-router, and require.js and feel quite confused. I tried to follow this tutorial <a href="http://ify.io/lazy-loading-in-angularjs/" rel="nofollow">http://ify.io/lazy-loading-in-angularjs/</a>. First, let me show you my code:</p>
  
  <p>app.js =></p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.config(function ($stateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
      $stateProvider.state('home',
          {
              templateUrl: 'tmpl/home-template.html',
              url: '/',
              controller: 'registration'
              resolve: {
                  deps: function ($q, $rootScope) {
                      var deferred = $q.defer(),
                          dependencies = ["registration"];
                      require(dependencies, function () {
                          $rootScope.$apply(function () {
                              deferred.resolve();
                          });
                      })
                      return deferred.$promise;
                  }
              }
          }
      );
      app.lazy = {
          controller: $controllerProvider.register,
          directive: $compileProvider.directive,
          filter: $filterProvider.register,
          factory: $provide.factory,
          service: $provide.service
      };
  });
  </code></pre>
  
  <p>Now in my registration.js I have following code:</p>
  
  <pre><code>define(["app"], function (app) {
      app.lazy.controller("registration" , ["$scope", function ($scope) {
          // The code here never runs
          $scope.message = "hello world!";
      }]);
  });
  </code></pre>
  
  <p>everything works well, even the code in registration.js is run. but the problem is code inside controller function is never run and I get the error 
  Error: [ng:areq] <a href="http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&amp;p1=not" rel="nofollow">http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&amp;p1=not</a> a function, got undefined</p>
  
  <p>Which seems my code does not register controller function successfully. Any Ideas?</p>
  
  <p>P.s. In <a href="https://github.com/angular-ui/ui-router/wiki" rel="nofollow">ui-router docs</a> it is said "If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired." But if I put the deferred.resolve(); from mentioned code inside a timeOut and run it after say 5 seconds, my controller code is run and my view is rendered before resolve, Strange.</p>