title: Resolve on Angular UI Router appStates not Delivering Scope Data
body: <p>I need data in a "sub" state and I am pulling my hair out trying to get it. The problem is I want the data to come from the $rootScope every time.</p>
  
  <p>So here goes - an outline of my problem.</p>
  
  <p>I'm using state provider. So here is my first state:</p>
  
  <pre><code>    .state('dashboard.create', {
          // parent: 'dashboard',
          url: '/create',
          views: {
            '': {
              templateUrl: "/app/partials/create.html",
              controller: "CreateCtrl",
            }
          }
        })
  </code></pre>
  
  <p>In the CreateCtrl all I do is call this <code>dashboardAPI.lessons();</code></p>
  
  <pre><code>services.factory('dashboardAPI', ['$rootScope', '$q', '$http', function(rootScope, $q, $http) {
  
    function load(path) {
      return $http.get("/app/data" + path);
    }
  
    return {
      lessons: function() {
        var deferred = $q.defer();
  
        if (rootScope.lessons == undefined) {
          load("/getLessons.json").success(function (data) {
            rootScope.lessons = data.result;
            deferred.resolve(data.result);
          }).
          error( function() {
            console.log("Problem getting lessons");
          });
        }
        else
          deferred.resolve(rootScope.lessons);
        return deferred.promise;
      }
    };
  
  }]);
  </code></pre>
  
  <p>This works to fill the rootScope.lessons object so I can populate the view.</p>
  
  <p>Then, there's a sub state like this:</p>
  
  <pre><code>    .state('dashboard.create.lessons', {
          // parent: 'create',
          url: '/lessons',
          views: {
            'curriculum': {
              templateUrl: "/app/partials/create.lessons.html",
              controller: ['curriculumHash', function(curriculumHash){
                curriculumHash.sstHash();
              }],
            },
          }
        })
  </code></pre>
  
  <p>In this controller it's calling another service:</p>
  
  <pre><code>services.factory('curriculumHash', ['$rootScope', '$q', 'dashboardAPI', function(rootScope, $q, dashboardAPI) {
  
    return {
      sstHash: function() {
        var deferred = $q.defer();
  
        if (rootScope.sstopicsArray == undefined) {
          //Get a promise back from API call
          dashboardAPI.lessons().then(function(data) {
            rootScope.sstopicsArray = [];
            var x = data.Topics;
            for (var i=0; i&lt;x.length; i++) {
              var y = x[i].Subtopics;
              for (var j=0; j&lt;y.length; j++) {
                var z = y[j].Subsubtopics;
                for (var k=0; k&lt;z.length; k++) {
                  rootScope.sstopicsArray.push({
                    Id: z[k].Id,
                    Name: z[k].Name,
                    Description: z[k].Description,
                    List: z[k].Lessons
                  });
                }
              }
            }
            return deferred.resolve();
          });
        }
        else
          return deferred.resolve();
      }
    };
  }]);
  </code></pre>
  
  <p>And this also works. At filling the array so I can use it to populate the view with some sortable jquery lists. In other words, I have to take a very lengthy object (lessons, from above) and break it into simpler hash arrays.</p>
  
  <p>NOW, here is where I want to chuck my computer out the window:</p>
  
  <p>I need one more sub(sub)state where I can find one object in that new hash.</p>
  
  <pre><code>     .state('dashboard.create.lessons.detail', {
          // parent: 'lessons',
          url: '/{lessonId}',
          views: {
            'detail@dashboard.create': {
              templateUrl: "/app/partials/create.detail.html",
              resolve: {
                getData: "curriculumHash"
              },
              controller: ['$scope', '$stateParams', 'getData', function(scope, stateParams, getData){
                  getData.sstHash().then(function() {
  
                    for (var i=0; i&lt;scope.sstopicsArray.length; i++) {
                      var b = a[i];
                      for (var j=0; j&lt;b.length; j++) {
                        if (b[j].Id == stateParams.lessonId)
                          scope.activeItem = b[j];
                      };
                    }
                  });
                })
              }],
            }
          }
        })
  </code></pre>
  
  <p>I have searched high and low for a decent example of how to use resolve. No matter, when I put a stop break in the controller of the dashboard.create.lessons.detail state it says getData is undefined and chrome throws an error because you can't get the length of an undefined object.</p>
  
  <p>Can anyone suggest a tip. I really need this stuff to be in the scope because I want to play with the model.
  If someone could also just refer me to some more thorough resolve documentation than is on the angular ui site, that could be helpful. Thanks!</p>