Custom Component Popup

(function() {
  'use strict';
  angular
    .module('formioApp')
    .config([
      'formioComponentsProvider',
      function(
        formioComponentsProvider
      ) {
        formioComponentsProvider.register('jobrouting', {
          title: 'Job Routing',
          template: 'views/components/jobrouting.html',
          settings: {},
          tableView: function(data) {
            var totalHours = 0;
            angular.forEach(data, function(value) {
              totalHours += parseFloat(value);
            });
            return totalHours.toFixed(2) + ' hrs';
          },
          controller: ['$scope', function($scope) {
            var key = $scope.component.key;
            if (!$scope.data[$scope.component.key]) {
              $scope.data[$scope.component.key] = {
                move: 0.5,
                layout: 0.5,
                roll: 0.5,
                cut: 0.5
              };
            }

            $scope.totalHours = 0;
            $scope.$watch('data.' + key, function(data) {
              $scope.totalHours = 0;
              angular.forEach(data, function(value) {
                $scope.totalHours += parseFloat(value.toFixed(2));
              });
            }, true);
          }]
        });
      }
    ])
    .directive('jobPopup', function() {
      return {
        restrict: 'A',
        controller: [
          '$scope',
          'ngDialog',
          function(
            $scope,
            ngDialog
          ) {
            $scope.jobPopup = function() {
              ngDialog.open({
                template: 'views/components/jobpopup.html',
                scope: $scope,
                showClose: false
              });
            };
          }
        ]
      };
    })
    .run([
    '$rootScope',
    '$state',
    '$stateParams',
    '$templateCache',
    'Formio',
    'FormioAlerts',
    'AppConfig',
    'FormioAuth',
    function(
      $rootScope,
      $state,
      $stateParams,
      $templateCache,
      Formio,
      FormioAlerts,
      AppConfig,
      FormioAuth
    ) {

      $templateCache.put('views/components/jobrouting.html',
        '<div class="btn btn-default" job-popup ng-click="jobPopup()">{{ totalHours }} Hours</div>'
      );

      $templateCache.put('views/components/jobpopup.html',
        '<table class="table table-condensed">' +
        '  <tr><th></th><th>Hrs</th></tr>' +
        '  <tr>' +
        '    <td><label>Move</label></td>' +
        '    <td><div class="form-group"><input type="number" step="0.1" class="form-control" ng-model="data[component.key].move"/></div></td>' +
        '  </tr>' +
        '  <tr>' +
        '    <td><label>Layout</label> </td>' +
        '    <td><div class="form-group"><input type="number" step="0.1" class="form-control" ng-model="data[component.key].layout"/></div></td>' +
        '  </tr>' +
        '  <tr>' +
        '    <td><label>Roll</label> </td>' +
        '    <td><div class="form-group"><input type="number" step="0.1" class="form-control" ng-model="data[component.key].roll"/></div></td>' +
        '  </tr>' +
        '  <tr>' +
        '    <td><label>Cut</label></td>' +
        '    <td><div class="form-group"><input type="number" step="0.1" class="form-control" ng-model="data[component.key].cut"/></div></td>' +
        '  </tr>' +
        '</table>' +
        '<div class="btn btn-default" ng-click="closeThisDialog()">Save</div>'
      );
    }
  ]);
})();

Can we write custom component (popup component) and use it in React and Angular6 application both?