title: angular-ui-route resolve with angularJS factory
body: <p>I am trying to use the $stateProvider resolve with a factory I created</p>
  
  <p>for some reason, the promise from the factory is an empty object</p>
  
  <p>but when i log the data from the $http call, I get data from my .json file</p>
  
  <p>any idea why my defer.promise is an empty object?</p>
  
  <p>playlistsService.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
      'use strict';
  
      angular
          .module('app.core')
          .factory('playlistsService', playlistsService);
  
      playlistsService.$inject = ['$http', '$q'];
  
      /* @ngInject */
      function playlistsService($http, $q) {
          var service = {
              loadPlaylists : loadPlaylists
          };
  
          return service;
  
          ////////////////
  
          function loadPlaylists() {
              var defer = $q.defer();
              $http.get('data/playlists.json')
                  .success(function (data) {
                      console.log('json data: ' + angular.toJson(data));
                      defer.resolve(data);
                  });
              console.log('defer.promise: ' + angular.toJson(defer.promise));
              return defer.promise;
          }
      }
  
  })();</code></pre>
  </div>
  </div>
  </p>
  
  <p>playlists.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
      'use strict';
  
      angular
          .module('app.playlists')
          .config(stateProvider)
          .controller('Playlists', Playlists);
  
      stateProvider.$inject = ['$stateProvider'];
      Playlists.$inject = ['playlistsService'];
  
      /* @ngInject */
      function stateProvider($stateProvider){
          $stateProvider
              .state('app.playlists', {
                  url: '/playlists',
                  views: {
                      'menuContent': {
                          templateUrl: 'app/playlists/playlists.html',
                          controller: 'Playlists as vm',
                          resolve: {
                              playlists: function(playlistsService){
                                  return playlistsService.loadPlaylists();
                              }
                          }
                      }
                  }
              })
      }
  
      /* @ngInject */
      function Playlists(playlists) {
          /* jshint validthis: true */
          var vm = this;
  
          vm.activate = activate;
          vm.title = 'Playlists';
          vm.playlists = playlists;
  
          activate();
  
          ////////////////
  
          function activate() {
              console.log('playlists object: ' + angular.toJson(vm.playlists))
              console.log('playlists from service: ' + angular.toJson(playlists))
          }
  
  
      }
  
  })();</code></pre>
  </div>
  </div>
  </p>