title: Using the AngularUI Router to dynamically load controllers
body: <p>I'm using <code>ui-router</code> in an app that will have dozens of templates. Each template will have a controller.</p>
  
  <p>From what I've been reading, something like this (to setup a route) ought to work:</p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('start', {
        url: '/start',
        templateUrl: 'partials/start.html',
        controller: 'StartCtrl'
      })
  });
  </code></pre>
  
  <p>That's assuming StartCtrl was previously defined. The app will eventually have dozens of controllers, and don't want the overhead of downloading all of them at once. How can I load a controller only when the template is requested?</p>