title: Angular UI Router - Resolves with Child and Parents
body: <p>I have a angular page, and depending if a value in the Page object equals a particular value, i would like to maybe load another state, i say maybe, because if it is not then i have no need to load another view (but maybe this is where this is going wrong?)</p>
  
  <p>Here is my current state configuration</p>
  
  <pre><code>$stateProvider
      .state('app', {
          url: '',
          abstract: true,
          templateProvider: ['$templateCache', function ($templateCache) {
              return $templateCache.get('app/main/main.html');
          }],
          controller: 'MainController',
          resolve: {
              Pages: ['PageApi', function (PageApi) {
                  return PageApi.getAll();
              }]
          }
  
      })
      .state('app.page', {
          url: '/page/{id}',
          params: {
              id: { value: 0 }
          },
          templateProvider: ['$templateCache', function ($templateCache) {
              return $templateCache.get('app/page/page.html');
          }],
          controller: 'PageController',
          resolve: {
              Page: ['$stateParams', 'PageApi', function ($stateParams, PageApi) {
                  return PageApi.get($stateParams.id);
              }],
              Contents: ['$stateParams', 'ContentApi', function($stateParams, ContentApi) {
                  return ContentApi.getByPage($stateParams.id);
              }]
          }
      })
      .state('app.page.search', {
          templateProvider: ['$templateCache', function ($templateCache) {
              return $templateCache.get('app/page/partials/page-search.tpl.html');
          }],
          controller: 'PageSearchController',
          resolve: {
              Module: ['ModuleApi', 'Page', function(ModuleApi, Page) {
                  return ModuleApi.get(Page.moduleId);
              }]
          }
      })
  </code></pre>
  
  <p>As you can see i have my base state called app, which loads my basic page (all fine).</p>
  
  <p>I also have app.page which will load my partial page.html (again fine)</p>
  
  <p>app.page uses this controller and this partial html file.</p>
  
  <pre><code>angular.module('app').controller('PageController', ['$state', '$scope', 'Page', 'Contents', 
      function ($state, $scope, Page, Contents) {
  
          if (Page.action == 'search')
              $state.go('app.page.search');
      }]);
  </code></pre>
  
  <p>app/page/page.html</p>
  
  <pre><code>&lt;!-- main --&gt;
  &lt;section role="main" class="row"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
  
      &lt;div ng-if="showSide" class="col-md-3"&gt;
          &lt;div page-location location="side"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>app/main/main.html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="wrapper"&gt;
          &lt;!-- content --&gt;
          &lt;div ui-view class="content"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now i thought that child states had the same resolves as their parent, but when the app.page.search resolve executes, it throws an error saying Page is undefined.</p>
  
  <p>How can i access app.Page resolves from app.page.search?</p>
  
  <p>I have obviously set something up incorrectly but not sure what.</p>
  
  <p>As i said before, app should load my basic page (which it does), app.page should load my page contents, and app.page.search should load more content depending on the Page object loaded in the app.Page resolve.  Maybe i should not be changing the state in the pageController? But i do not know if you can change state from within another state config?</p>