title: sharing between modules with AngularJS?
body: <p>Let's say I have a <code>stuff</code> module that I want to inject into <code>myApp</code> config:</p>
  
  <pre><code>angular.module('myApp', ['stuff']).
    config([function() {
  
    }]);
  </code></pre>
  
  <p>There are two submodules:</p>
  
  <pre><code>angular.module("stuff", ["stuff.thing1","stuff.thing2"]);
  </code></pre>
  
  <p>Here's the first:</p>
  
  <pre><code>angular.module('stuff.thing1', []).provider("$thing1", function(){
      var globalOptions = {};
      this.options = function(value){
          globalOptions = value;
      };
      this.$get = ['$http',function ($http) {
          function Thing1(opts) { 
              var self = this, options = this.options = angular.extend({}, globalOptions, opts);  
          }
          Thing1.prototype.getOptions = function(){
              console.log(this.options.apiKey);
          };
          return {
              thing1: function(opts){
                  return new Thing1(opts);
              }
          };
      }];
  });
  </code></pre>
  
  <p>And the second is identical for ease of example:</p>
  
  <pre><code>angular.module('stuff.thing2', []).provider("$thing2", function(){
      var globalOptions = {};
      this.options = function(value){
          globalOptions = value;
      };
      this.$get = ['$http',function ($http) {
          function Thing2(opts) { 
              var self = this, options = this.options = angular.extend({}, globalOptions, opts);  
          }
          Thing2.prototype.getOptions = function(){
              console.log(this.options.apiKey);
          };
          return {
              thing2: function(opts){
                  return new Thing2(opts);
              }
          };
      }];
  });
  </code></pre>
  
  <p>What you will notice is that you can access both of them as providers to configure options:</p>
  
  <pre><code>angular.module('myApp', ['stuff']).
    config(['$thing1Provider', '$thing2Provider', function($thing1Provider, $thing2Provider) {
      $thing1Provider.options({apiKey:'01234569abcdef'});
      $thing2Provider.options({apiKey:'01234569abcdef'});
    }]);
  </code></pre>
  
  <p>If we were in a controller, you could overwrite per scope like:</p>
  
  <pre><code>controller('AppController', ['$scope','$thing1', function($scope, $thing1) {    
    var thing1 = $thing1.thing1({apiKey:'3kcd894g6nslx83n11246'});  
  }]).
  </code></pre>
  
  <p>But what if they are always sharing the same property? How do I share something between providers?</p>
  
  <pre><code>angular.module('myApp', ['stuff']).config(['$stuff' function($stuff) {
    //No idea what I'm doing here, just trying to paint a picture.
    $stuff.options({apiKey:'01234569abcdef'});
  }]);
  </code></pre>
  
  <p>Can I inject <code>$stuff</code> and config a shared property for both <code>$thing1</code> and <code>$thing2</code>?</p>
  
  <p>How do I access both <code>$thing1</code> and <code>$thing2</code> as an extension of a single module?</p>
  
  <pre><code>controller('AppController', ['$scope','$stuff', function($scope, $stuff) {
    //Again - no idea what I'm doing here, just trying to paint a picture.
  
    //$thing1 would now be overwrite $stuff.options config above.
    var thing1 = $stuff.$thing1.thing1({apiKey:'lkjn1324123l4kjn1dddd'});
  
    //No need to overwrite $stuff.options, will use whatever was configured above.
    var thing2 = $stuff.$thing2.thing2();  
  
    //Could I even change the default again for both if I wanted too?
    $stuff.options({apiKey:'uih2iu582b3idt31d2'});
  }]).
  </code></pre>