JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
    <div ng-controller="ctrl" ></div>
</body>

JavaScript

angular.module('app', []);

angular.module('app').factory('BaseFactory', [ function(){
    
    var load = function() {
        console.log('loading factory base');
    }
    
    return { 'load': load }
}]);

angular.module('app').factory('ChildFactory', ['BaseFactory', function (BaseService) {

  var child = angular.copy(BaseService);
    
  child.childLoad = function () {
    console.log('loading factory child');
  };

  return child;
}]);

angular.module('app').service('BaseService', [function() {

        this.load = function(){
            console.log('loading service base');
        }
}]);

angular.module('app').service('ChildService', ['BaseService', function(BaseService) {

        angular.copy(BaseService, this);

        this.childLoad = function() {
            console.log('loading service child');
        }
}]);

angular.module('app').controller('ctrl', ['$scope', 'ChildFactory', 'ChildService', function($scope, ChildFactory, ChildService) {

    ChildService.load();
    ChildService.childLoad();
    ChildFactory.load();
    ChildFactory.childLoad();
}]);