JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="sampleApp">
    <div ng-controller="sampleController">
        <ul>
            <li>di1 - text1: {{di1text1}}</li>
            <li>di1 - text2: {{di1text2}}</li>
            <li>di2 - text: {{di2text}}</li>
            <li>di3 - text: {{di3text}}</li>
            <li>di4 - text: {{di4text}}</li>
            <li>di5 - text: {{di5text}}</li>
            <li>di6 - text: {{di6text}}</li>
            <li>di7 - text: {{di7text}}</li>
        </ul>
    </div>
</div>

JavaScript

var module = angular.module("sampleApp", []);

module.config(function($provide){
    // Using "provider"
    $provide.provider("di1", function(){
        this.$get = function(){
            return function($scope, text) {
                $scope.di1text2 = "DI1 TEXT 2";
                return text;
            };
        };
    });

    // Using "factory"
    $provide.factory("di2", function(){
        return function(text) {
            return text;
        };
    });
    
    // Using "value"
    $provide.value("di3", function(text) {
        return text;
    });
});

// Using "provider" shortcut
module.provider("di4", function(){
    this.$get = function(){
        return function(text) {
            return text;
        };
    };
});

// Using "factory" shortcut
module.factory("di5", function(){
    return function(text) {
        return text;
    };
});

// Using "value" shortcut
module.value("di6", function(text) {
    return text;
});

module.controller("sampleController", function($scope, $injector, di1, di2, di3, di4, di5, di6) {
    $scope.di1text1 = di1($scope, "DI1 TEXT 1");
    $scope.di2text = di2("DI2 TEXT");
    $scope.di3text = di3("DI3 TEXT");
    $scope.di4text = di4("DI4 TEXT");
    $scope.di5text = di5("DI5 TEXT");
    $scope.di6text = di6("DI6 TEXT");

    var di7 = $injector.get("di6");    
    $scope.di7text = di7("DI7 TEXT");
});