title: Using ui-router and ocLazyLoad to load a controller and set the partial to it
body: <p>I'm a complete Angular noob and trying to do some fancy stuff quickly, so forgive me if this is a dumb question. </p>
  
  <p>I've created a website that uses routing, and I'm using ui-router for the routing instead of the standard Angular router. The theory is still the same - I have an index.html page in the root of my website which is the "master" or "host" page, and loginView.htm, which is a partial, exists in a separate directory. </p>
  
  <p>The mainController for the project is loaded in the index.html page. Referencing this controller does NOT cause an error or problem. </p>
  
  <p>What I'd like to do, in order to keep code manageable and small, is have the custom controller for a partial page lazy load when I load the partial, and then associate that partial page with the newly loaded controller. Makes sense, right? I don't want to load all the controllers by default, because that's a waste of time and space.</p>
  
  <p>So my structure looks like this (if it matters to anyone):</p>
  
  <pre><code>Root
  --app/
  ----admin/
  ------login/
  --------loginView.html
  --------loginController.js
  --mainController.js
  index.html
  </code></pre>
  
  <p>This is my loginController code. For testing purposes, I have made the mainController code match this exactly.</p>
  
  <pre><code>var loginController = function ($scope, $translate) {
      $scope.changeLanguage = function (key) {$translate.use(key); };
  };
  
  angular.module('app').controller('loginController', loginController);
  </code></pre>
  
  <p>Finally, here is my routing code:</p>
  
  <pre><code>function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
  
      $urlRouterProvider.otherwise("/admin/login");
  
      $stateProvider
          .state('login', {
              url: "/admin/login",
              templateUrl: "app/admin/login/loginView.html",
              controller: loginController,
              resolve: {
                  loadPlugin: function ($ocLazyLoad) {
                      return $ocLazyLoad.load([
                          {
                              name: 'loginController',
                              files: ['app/admin/login/loginController.js']
                          }
                      ]);
                  }
              }
          })
      ;
  }
  
  angular
      .module('app')
      .config(config)
      .run(function ($rootScope, $state) {
          $rootScope.$state = $state;
      });
  </code></pre>
  
  <p>Now - if I remove the whole "resolve" section, and change the controller to "mainController", everything works. The page loads, the buttons work, they call the "changeLanguage" function and everything is wonderful. </p>
  
  <p>But I want the "changeLanguage" feature to reside in the loginController because that's the only page that uses it. So when the code looks like it does above, an error fires("Uncaught Error: [$injector:modulerr]") and the partial page fails to load.</p>
  
  <p>I don't understand what I'm doing wrong, and I'm not finding what I need via Google (maybe I just don't know the right question to ask). </p>
  
  <p>Help?</p>