How to return form field values ​​from modal window?

Question

Angular

window template

.modal-header
  h5
    | {{modalOptions.headerText}}
.modal-body(ng-bind-html='modalOptions.bodyHtml')
.modal-footer
  button.btn(
        type='button', 
        ng-click='modalOptions.close()'
      )
    | {{modalOptions.closeButtonText}}
  button.btn.btn-primary(
              ng-click='modalOptions.ok(modalOptions.form)'
            )
    | {{modalOptions.actionButtonText}}

Modal window service

/*global angular*/
(function () {
  'use strict';
  
  angular
    .module('App')
    .service('modalService', ['$uibModal', 'APP_NAME', modalService]);

  modalService.$inject = ['$uibModal', 'APP_NAME'];

  function modalService($uibModal, APP_NAME) {

      var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: 'js/app/view/ui.templates/modals/modalServiceTemplate.html',
        size: 'md'
      };

      var modalOptions = {
        closeButtonText: 'Отмена',
        actionButtonText: 'OK',
        headerText: APP_NAME,
        bodyText: 'Вы уверены?',
        form: {}
      };

      this.showModal = function (customModalDefaults, customModalOptions) {
        if (!customModalDefaults){
          customModalDefaults = {};
        }
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
      };

      this.show = function (customModalDefaults, customModalOptions) {
        var tempModalDefaults = {};
        var tempModalOptions = {};

        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
          tempModalDefaults.controller = ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
              $uibModalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
              $uibModalInstance.dismiss('cancel');
            };
          }]
          
          tempModalDefaults.controller.$inject = ['$scope', '$uibModalInstance'];
        }

        return $uibModal.open(tempModalDefaults).result;
      };

    }
    

})();

Calling a Window in a Controller

self.submitDelete = function () {
      var modalOptions = {
        closeButtonText: 'Отмена',
        actionButtonText: 'Удалить аккаунт',
        //headerText: 'Подтверждение',
        bodyText: 'Вы уверены, что хотите удалить аккаунт?',
        bodyHtml: $sce.trustAsHtml('<form ng-init="modalOptions.form = {login: "www"}"><input type="text" ng-model="modalOptions.form.login"></form>')
      };

      modalService.showModal({}, modalOptions).then(function (result) {
        console.log(result);
        //self.$auth.DeleteAccount();
      });
    };

The form is displayed in a window, but I can’t figure out how to bind it correctly so that when the OK button is pressed, the values ​​​​of the form fields are returned.
Of course, I know that I could make a bunch of window templates and call the one I need. But it is planned to make dynamic generation of forms from the data received from the server.
Is there any kosher way to solve my problem?

Answer 1

Solved the problem using the directive.
// window template
// directive name - compile-html

.modal-header
  h4
    | {{modalOptions.headerText}}
.modal-body(compile-html, ng-bind-html='modalOptions.bodyHtml')
.modal-footer
  button.btn(
        type='button', 
        ng-click='modalOptions.close()'
      )
    | {{modalOptions.closeButtonText}}
  button.btn.btn-primary(
              ng-click='modalOptions.ok(modalOptions.form)'
            )
    | {{modalOptions.actionButtonText}}

// directive code

(function () {
  'use strict';

  angular
    .module('App')
    .directive('compileHtml', ['$timeout', '$compile', compileHtml]);

  compileHtml.$inject = ['$timeout', '$compile'];

  function compileHtml($timeout, $compile) {
    var directive = {
      restrict:'A',
      link: function(scope,elem,attrs){
        $timeout(function(){
          $compile(elem.contents())(scope);    
        });
      }
    };
    return directive;
  }

})();

And everything works as it should))

Answer 2

The problem is that ng-bind-html doesn't do content processing like angularjs template, it just inserts static html. Something like this will help you
https://github.com/incuna/angular-bind-html-compile