title: Factoring out $httpProvider and interceptor from main js throws unknown provider
body: <p>I'm trying to move some config out of the main js file. I'm having problems with the step where I push the http interceptor on the $httpProvider.interceptor array, saying that it is an unknown provider. My interceptor is a factory function that lives in a file in the services directory and is appended to module.exports and required/bundled in with browserify. Currently the app errors with a </p>
  
  <blockquote>
    <p>angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider: $Provider &lt;- $ &lt;- myHttpInterceptor &lt;- $http &lt;- $templateRequest &lt;-
    $route
    <a href="http://errors.angularjs.org/1.5.3/" rel="nofollow">http://errors.angularjs.org/1.5.3/</a>$injector/unpr?p0=%24Provider%20%3C-%20%2…Interceptor%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24route</p>
  </blockquote>
  
  <p>I had this working in the main app.js file, but trying to factor it out is proving to be harder than I expected. It looks like $httpProvider is undefinded inside the $httpProvider block.</p>
  
  <pre><code>// in app.js
  .factory('myHttpInterceptor', ['$injector', '$location', '$q', '$rootScope', '$', services.myHttpInterceptor])
  .config(['$httpProvider', providers.httpProvider])
  
  providers.httpProvider : require('./config/http-provider')
  services.myHttpInterceptor : require('./services/myHttpInterceptor')
  
  // in http-provider.js
  function httpProvider ($httpProvider) {
      $httpProvider.defaults.headers.common = {}
      $httpProvider.defaults.headers.post = {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
          'Accept': 'application/json, text/javascript, */*; q=0.01'
      };
      $httpProvider.defaults.headers.put = {}
      $httpProvider.defaults.headers.patch = {}
      $httpProvider.interceptors.push('myHttpInterceptor') // &lt;&lt;-- Fails here in the debugger
  }])
  module.exports = httpProvider
  
  // in myHttpInterceptor.js
  function myHttpInterceptor ($injector, $location, $q, $rootScope, $) {
      // I did not put jquery in this project ;)
      ...
  }
  module.exports = myHttpInterceptor
  </code></pre>
  
  <p>Let me know if I can provide more info. Thanks for the help!</p>
  
  <p><strong>Update</strong></p>
  
  <p>It would be unwise for me to include the entire app bootstrap file, because it is quite extensive, but here's a look to see how it starts up:</p>
  
  <pre><code>var angular = require('angular'),
      $ = require('./jquery.js');
  
  (function (angular, config, controllers, services, directives, filters, providers, $) {
      angular
          .module('***', ['ngRoute', 'ngResource', ...])
  })(
  
  angular, 
  //config obj
  {...},
  // controllers obj
  {...}
  // etc ...
  )
  </code></pre>
  
  <p>All of the modules required at the top are defined and usable. I can stop the debugger after requiring jquery and it allows me to query the DOM with it in the console.</p>