AngularJS как да конфигурирам доставчик между 2 модула?

Моля, вижте моето доказателство за концепция: http://plnkr.co/edit/y3pzFv?p=preview.

Как да конфигурирам доставчик между 2 модула?

Накратко: Опитвам се да обобщя услуга и да конфигурирам няколко екземпляра малко по-различно.

В момента имам куп Angular Services (фабрика), които бих искал да обобщя, за да могат да се използват повторно. В моето доказателство за концепция се опитвам да разделя приложение AngularJS 1.3 на 2 модула „bob“ и „joe“. Всеки модул трябва да споделя доставчик, който трябва да има конфигурируема променлива, наречена храна. Опитвам се да дефинирам повторно използваема услуга и да създам отделен екземпляр за всеки модул.

Прочетох документацията на Angular за доставчиците и доколкото разбирам, доставчиците ви позволяват да извлечете конфигурируемата част в .config(). какво правя грешно Бих очаквал храната на Боб да бъде банан, но храната на Джо, която е конфигурирана на второ място, замества храната на Боб. Това ме кара да вярвам, че доставчикът на храна не създава нов екземпляр за всеки от модулите „bob“ и „joe“.

Аз съм на AngularJS v1.3.15

index.html

<div ng-controller="BobCtrl">Bob's Food: {{ providerInstance.get() }}</div>
<div ng-controller="JoeCtrl">Joe's Food: {{ providerInstance.get() }}</div>

app.js

angular.module('shared').provider('Food', function() {
  var _food = 'Default';  
  this.set = function(food) { _food = food; }

  this.$get = function() {
    return {
      get: function()  {
        return _food;
      }
    }
  };
});

angular.module('bob').config(function(FoodProvider) { 
  FoodProvider.set('Banana');
});
angular.module('bob').controller('BobCtrl', function($scope, Food) {
  $scope.providerInstance = Food;
});

angular.module('joe').config(function(FoodProvider) {
  FoodProvider.set('Apple');
});
angular.module('joe').controller('JoeCtrl', function($scope, Food) {
  $scope.providerInstance = Food;
});