title: AngularAMD + ui-router multiple views does not load controllers
body: <p>I'm trying to use angular-ui-router with angularAMD and there is one thing I cannot get working.</p>
  
  <p>I have one abstract state (named "first") and another nested state (named "second") that inherits from "first" and that contains a <em>views</em> key with 2 views, each view having its own controller and template.</p>
  
  <p>On angularAMD repo (github.com/marcoslin/angularAMD/issues/62), marcoslin show a way to do that, but I can't make it work, thus I think it's not exactly my situation :(</p>
  
  <pre><code>$stateProvider
      .state('root', {
          url: '',
          abstract: true,
          views: {
              'header': angularAMD.route({
                  templateUrl: 'app/root/header.tpl.html',
                  controller: 'HeaderCtrl',
                  controllerUrl: 'HeaderCtrl'
              }),
              'footer': angularAMD.route({
                  templateUrl: 'app/root/footer.tpl.html',
                  controller:'FooterCtrl',
                  controllerUrl: 'FooterCtrl'
              })
          }
      })
  </code></pre>
  
  <p>I was converting some big project in a lazy load way, so I thought the problem could come from a still not found side-effect. I made a simple plunker to check if it works better in a simpler environment, but it still doesn't work.</p>
  
  <p>Essentially, my problematic code is this one:</p>
  
  <pre><code>    $stateProvider
          .state('first',
              angularAMD.route({
                  abstract: true,
                  controllerUrl: 'first-controller',
                  templateUrl: 'first.tmpl.html',
                  controllerAs: 'first'
              })
          )
          .state('first.second', {
            url: '/introduction',
              views: {
                  second1: angularAMD.route({
                      templateUrl: 'second1.tmpl.html',
                      controllerUrl: 'second1-controller',
                      controllerAs: 'second1'
                  }),
                  second2: angularAMD.route({
                      templateUrl: 'second2.tmpl.html',
                      controllerUrl: 'second2-controller',
                      controllerAs: 'second2'
                  })
              }
          });
  </code></pre>
  
  <p>Please note that I use the possibility provided by angularAMD to avoid using <em>controller</em> key in angularAMD.route() method. You can do this if your controller file return an anonymous function.</p>
  
  <p>My full example can be found here:
  <a href="http://plnkr.co/edit/5WBtd3R7k20yRkMazIuk?p=preview" rel="nofollow">http://plnkr.co/edit/5WBtd3R7k20yRkMazIuk?p=preview</a></p>
  
  <p><strong>EDIT:</strong> I've forked my Plunker to show what happens when I try to use the more traditionnal angular syntax, without returning an anonymous function when loading my controllers.</p>
  
  <p>So the controller looks like:</p>
  
  <pre><code>define(['app'], function (app) {
    'use strict';
  
    app.controller('Second1Controller', function () {
        var vm = this;
  
        vm.value = "Hello you ! I'm Number 2.1";
      });
  });
  </code></pre>
  
  <p>and the call to angularAMD in the ui-router is changed like this (notice the <em>controller</em> key):</p>
  
  <pre><code>.state('first.second', {
            url: '/introduction',
              views: {
                  second1: angularAMD.route({
                      templateUrl: 'second1.tmpl.html',
                      controllerAs: 'second1',
                      controllerUrl: 'second1-controller',
                      controller: 'Second1Controller'
                  }),
                  second2: angularAMD.route({
                      templateUrl: 'second2.tmpl.html',
                      controllerUrl: 'second2-controller',
                      controllerAs: 'second2',
                      controller: 'Second2Controller'
                  })
              }
          });
  </code></pre>
  
  <p>See the new Plunker here: <a href="http://plnkr.co/edit/kPFBo7ssAtqAuiKdwnQ9?p=preview" rel="nofollow">http://plnkr.co/edit/kPFBo7ssAtqAuiKdwnQ9?p=preview</a></p>
  
  <p>This time I get the usual error that fires when you have not loaded what you try to use:</p>
  
  <blockquote>
    <p>Error: [ng:areq] Argument 'Second1Controller' is not a function, got
    undefined</p>
  </blockquote>
  
  <p><strong>END EDIT</strong></p>
  
  <p>Anybody to help me ? :)</p>
  
  <p>Cheers !</p>
  
  <p>Joel</p>