title: Get data before page load in angularJS
body: <p>I am trying to fetch a drop downlist before the page load using angular $http. I tried few combinations but it keep on giving the same error: </p>
  
  <p><strong>Error: [$injector:unpr] Unknown provider: officeListProvider &lt;- officeList &lt;- myController
  <a href="http://errors.angularjs.org/1.4.3/" rel="nofollow">http://errors.angularjs.org/1.4.3/</a>$injector/unpr?p0=officeListProvider%20%3C-%20officeList%20%3C-%20myController</strong> </p>
  
  <p>I am few weeks old in angular so please pardon in case of any silly mistakes. </p>
  
  <pre><code>var myApp = angular.module('myApp',['ngRoute']);
  
  myApp.config(['$routeProvider',function ($routeProvider) {  
      $routeProvider.when('../../home/goEeUpdateAngular.obj', {
          templateUrl: '/employee_update_angular.jsp', 
          controller: 'myController',
          resolve: {
              officeList: function(officeListFactory) {
                  return officeListFactory.getOfficeList();
              }
          }
      });   
  }]);
  
  myApp.factory('officeListFactory', function($http, $window) {
      $window.alert("Hi");
      var factoryResult = {
          getOfficeList: function() {
              var promise = $http({
                  method: 'GET', 
                  url: '../../home/goOfficesList.obj' 
              }).success(function(data, status, headers, config) {
                  console.log (data);
                  return data;
              });
  
              return promise;
          }
      }; 
  
      console.log (factoryResult.getOfficeList());
      return factoryResult;
  });
  
  myApp.controller('myController',function ($scope,officeList) {
      $scope.officeListFactory = officeListFactory.data;
  });
  </code></pre>