A number of services registering in another service that has no dependencies to them? (lazy-loading)

Question

I want to have a servcie called FeatureRegistry with whom all features are registering. The registering features have a dependency on the FeatureRegistry (and not vice versa).

How i did it right now was:

angular.module('app').factory('FeatureRegistry', function(){
  var FeatureRegistry = new Object();
  FeatureRegistry.features = new Array(); 
  FeatureRegistry.registerFeature = function(feature){
    FeatureRegistry.features.push(feature);
  }
  return FeatureRegistry;
}

angular.module('app').factory('Feature', function(FeatureRegistry){
  var Feature = new Object();
  FeatureRegistry.registerFeature(Feature);
  return Feature;
}

But the feature never seems to register. If I look up in the FeatureRegistry in features.

I tested it with a FeatureController:

angular.module('app').controller('FeatureController', 
  function($scope, FeatureRegistry){
  $scope.features = FeatureRegistry.features;
  return this; // not sure if a return is necessary
}

---

EDIT:
So now I know that services are lazy loaded and only instantiated when they are injected. But that is counter-intuitive with the application I want to achieve, because the features are supposed to be in there separate files and folders and I don't want to change the dependencies of FeatureRegistry anytime a new feature gets added.

---

EDIT 2:

Now I made a diagram to show how the structure should look:

Answer 1

You need to inject Feature somewhere, otherwise it won't be instantiated. E.g.,

app.controller('MainCtrl', function($scope, FeatureRegistry, Feature) {

Plunker