title: AngularJS Error: $injector:unpr Unknown Provider
body: <p>I'm trying to build my own service by following the example in the documentation for the factory methodology.  I think I've done something wrong however because I continue to get the unknown provider error.  This is my code for my app including the declaration, configuration and factory definition.</p>
  
  <p><strong>EDIT 
  I've now added all of the files to help troubleshoot</strong></p>
  
  <p><strong>EDIT
  The full details of the error are below the issues appears to be with getSettings, as it's looking for getSettingsProvider and cannot find it</strong></p>
  
  <pre><code>Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?    p0=getSettingsProvider%20%3C-%20getSettings
      at Error (native)
      at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450
      at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431
      at Object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
      at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499
      at c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
      at d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230)
      at Object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394)
      at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112
      at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:53:14 angular.js:9778
  (anonymous function) angular.js:9778
  (anonymous function) angular.js:7216
  h.$apply angular.js:12512
  (anonymous function) angular.js:1382
  d angular.js:3869
  $b.c angular.js:1380
  $b angular.js:1394
  Wc angular.js:1307
  (anonymous function) angular.js:21459
  a angular.js:2509
  (anonymous function) angular.js:2780
  q angular.js:330
  c
  </code></pre>
  
  <p><br><br></p>
  
  <p>These are all of the files I have in my app currently</p>
  
  <p>app.JS</p>
  
  <pre><code>//Initialize angular module include route dependencies
  
  var app = angular.module("selfservice", ['ngRoute']);
  
  app.config(function ($routeProvider) {
     $routeProvider
         .when('/', {
             templateUrl:"partials/login.html",
             controller:"login"
         });
  });
  
  
  
  
  
  
  app.factory('getSettings', ['$http', '$q', function($http, $q) {
      return function (type) {
          var q = $q.defer();
          $http.get('models/settings.json').success(function (data) {
              q.resolve(function() {
                  var settings = jQuery.parseJSON(data);
                  return settings[type];
              });
          });
  
          return q.promise;
      };
  }]);
  </code></pre>
  
  <p>And here is how I am using this service in my controller</p>
  
  <p>controller.JS</p>
  
  <pre><code>app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
      var loadSettings = getSettings('global');
      loadSettings.then(function(val) {
          $scope.settings = val;
      });
  
  }]);
  
  
  app.controller("login", ['$scope', function ($scope) {
  
      return ""
  
  
  
  }]);
  </code></pre>
  
  <p>directives.js</p>
  
  <pre><code>app.directive('watchResize', function(){
      return {
          restrict: 'M',
          link: function(scope, elem, attr) {
              scope.spacer = (window.innerWidth &lt; 1025) ? '' : 'large-3';
              scope.button = (window.innerWidth &lt; 1025) ? '' : 'large-6';
              angular.element(window).on('resize', function(){
                  scope.$apply(function(){
                      scope.spacer = (window.innerWidth &lt; 1025) ? '' : 'large-3';
                      scope.button = (window.innerWidth &lt; 1025) ? '' : 'large-6';
                  });
              });
          }
      };
  });
  </code></pre>
  
  <p>And if it's pertinent here's the HTML</p>
  
  <pre><code>&lt;html class="no-js" lang="en" ng-app="selfservice" ng-controller="globalControl"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
       &lt;title&gt;{{settings.title}}&lt;/title&gt;
       &lt;link rel="stylesheet" href="css/app.css" /&gt;
      &lt;script src="bower_components/modernizr/modernizr.js"&gt;&lt;/script&gt;
        &lt;script src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
         &lt;script src="bower_components/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
         &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/app.js"&gt;&lt;/script&gt;
        &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
        &lt;script src="js/directives.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="template"&gt;
          &lt;header id="header"&gt;
              &lt;img src="{{settings.logo}}" alt="{{settings.logoDescription}}"/&gt;
          &lt;/header&gt;
  
          &lt;div id="view"&gt;
              &lt;ng-view&gt;&lt;/ng-view&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script src="bower_components/foundation/js/foundation.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          //initialize foundation
          $(document).foundation();
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can someone point me in the right direction?  I have done my best to follow the documentation, and looking through SO most of the related issues are much more in depth, and more difficult for me to understand.  This is my first time creating a service.</p>