title: Undefined resolve data in Controller, UI-Router
body: <p><strong>NOTE:</strong> This question is similar to <a href="https://stackoverflow.com/questions/28175785/ui-router-and-resolve-unknown-provider-in-controller/45826016?noredirect=1#comment78685201_45826016">UI-Router and resolve, unknown provider in controller</a> but differs in that it deals specifically with AngularJS 1.5+ and Component-based apps which changes how things are configured for a state resolve.</p>
  
  <p>So I am trying to resolve some data in a child state. I had done this before for a previous resolve but am running into an issue for the 2nd one.</p>
  
  <p>Here is my setup:</p>
  
  <h3>App State</h3>
  
  <p>I have a parent state "app" and a child state "home". When a User logs in they go through the "app" state which did the resolving and then they get redirected to the "home" state.</p>
  
  <pre><code>angular
  .module('common')
  .component('app', {
      templateUrl: './app.html',
      controller: 'AppController',
      bindings: {
          member: '=',
      }
  })
  .config(function ($stateProvider) {
      $stateProvider
          .state('app', {
              redirectTo: 'home',
              url: '/app',
              data: {
                  requiredAuth: true
              },
              resolve: {
                  member: ['AuthService',
                      function (AuthService) {
                          return AuthService.identifyMember()
                              .then(function (res) {
                                  AuthService.setAuthentication(true);
                                  return res.data;
                              })
                              .catch(function () {
                                 return null;
                              });
                      }
                  ],
                  organization: ['AuthService',
                      function (AuthService) {
                          return AuthService.identifyOrganization()
                              .then(function (res) {
                                  return res.data;
                              })
                              .catch(function () {
                                  return null;
                              });
                      }
                  ],
                  authenticated: function ($state, member) {
                      if (!member)
                          $state.go('auth.login');
                  }
              },
              component: 'app',
          });
  });
  </code></pre>
  
  <h3>Home State</h3>
  
  <pre><code>angular
  .module('components')
  .component('home', {
      templateUrl: './home.html',
      controller: 'HomeController',
      bindings: {
          member: '=',
      }
  })
  .config(function ($stateProvider) {
      $stateProvider
      .state('home', {
          parent: 'app',
          url: '/home',
          data: {
              requiredAuth: true
          },
          component: 'home',
          resolve: {
              'title' : ['$rootScope',
                  function ($rootScope) {
                      $rootScope.title = "Home";
                  }
              ],
          }
      });
  });
  </code></pre>
  
  <p>And in my controller when I try to console.log the output of what should be there:</p>
  
  <pre><code>function HomeController(AuthService, $state) {
      let ctrl = this;
      console.log(ctrl.organization);
  }
  </code></pre>
  
  <p>But, I am getting <strong>undefined</strong>.</p>
  
  <p>My methods in AuthService are getting called the same way for the <strong>member</strong> resolve so I am not sure what the problem is.</p>