how to create wrapper directives for Controller in AngularJS

Question

I'm trying to do upgrade controllers/components written in AngularJS1 to Angular6. I'm taking the approach of having the wrappers for all the existing AngularJS1 controllers/component by extending "UpgradeComponent" placed under the folder "directive-wrappers" in my example.

We have many controllers written in AngularJS1 which need to upgraded and used inside Angular6 application. Since these controllers are bit complex we don't want to rewrite it or touch these controllers, instead we want to create some directives which would be like a wrappers for these controllers and eventually upgraded and used. I'm bit stuck here on how to write the directives for the existing controllers?

I have created the POC, in which I wanted to upgrade homepageController and UserServiceController. These 2 controllers to be wrapped in a directive and then upgraded to Angular6.

The typical existing controllers would look like this, since it is bit complex and contains many functionalities we don't want to touch these existing controllers.

hence create a wrapper directives for these...

angular.module('app.products').controller('ProductDetailsController', [

    '$scope', 'restService', 'currentCartService', 'productDetailsDialogService', 'constants', 'dialog', '$state', 'checkValues', 'rightsService', 'addSkuToItemsDialogService',
    'dsaContextService', 'dfsService','messenger','cartExtService','dfsDpaExtService', 'dfsSmbExtService',
    function($scope, restService, currentCartService, productDetailsDialogService, constants, dialog, $state, checkValues, rightsService, addSkuToItemsDialogService,
        dsaContextService, dfsService, messenger, cartExtService, dfsDpaExtService, dfsSmbExtService) {

        'use strict';

        $scope.iAm = 'ProductDetailsController';

         $scope.addItemToCart = function() {
         ...
          };

        $scope.isCartActive = function() {
            ...
        };
        ...           
        ...
 }]);