Входные данные формы в модальном окне не реагируют на щелчки, используя UI-Bootstrap / AngularJS

У меня есть одна проблема, и я не могу придумать решение. У меня есть веб-приложение, которое использует AngularJS и UI-Bootstrap (угловой-ui-bootstrap). В моем приложении я написал службу, которая откроет модальное окно с определенным представлением, когда произойдет событие, например событие click. Теперь в представлениях, открытых в окне, есть формы, чтобы пользователи могли обновлять свои личные данные и т.д. И т.д. Теперь я заметил, что при нажатии на вкладках формы HTML в представлениях, содержащихся в модальном окне (например, Select, вход) интерфейс не реагирует. Таким образом, параметры выбора не отображаются или клавиатура для ввода недоступна. В Chrome на Android нет функциональности, это как если бы клик просто не сопротивлялся. В Firefox это очень медленно, но отображаются параметры. В iOS производительность медленная и ненадежная. Когда я создаю клон входных данных в представлениях, которые не являются частью модального представления, проблем нет.

Вот часть моего модального сервиса, чтобы дать вам представление... Я расширил $modal от UI-Bootstrap

angular.module('myapp')
    .factory('ModalService', ['$modal', function ($modal) {
        // I have only included one method but we have many...

      var modal = angular.copy($modal);
      modal.addProfileChildren = function (childData) {

            var options = {
                templateUrl: '/an/views/modals/modal-profile-add-children.html',
                controller: 'ProfileAddChildrenCtrl',
                windowClass: 'add-children-modal',
                resolve: {
                    modalData: function () {

                        return {
                            childData: childData
                        };
                    }
                }
            };

            return modal.open(options);
        };

        return modal;
    }]);

Вот представление, которое вызывается templateUrl (это /an/views/modals/modal-profile-add-children.html)

    <form name="childrenForm" data-ng-submit="setChildren(children)" novalidate>

    <!-- List Existing Children Here -->
    <div class="container-fluid u-no-padding-hori">
        <div data-ng-repeat="existingKid in existingChildren" data-delete-child="{{existingKid.id}}" class="row question-wrapper u-no-margin-horiz">
            <div class="col-xs-2 affiliation-icon"><span class="icon-ic_kids"></span></div>
            <div class="col-xs-8">
                <div class="affiliation-main" data-ng-bind="existingKid.title"></div>
                <div class="affiliation-sub" data-ng-bind="existingKid.text"></div>
            </div>
            <div class="col-xs-2 text-right"><span class="u-icon-circle icon-ic_trash u-text-color-blue"></span></div>
        </div>
    </div>

    <!-- clicking on the select below should provide a dynamic form when I click in a mobile browser NOTHING happens -->

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 u-padding-top-s question-footer">
                <select ng-model="children.number"
                        data-ng-options="kid.label for kid in childrenDefault track by kid.value">
                </select>
            </div>
        </div>
    </div>

    <div class="container-fluid" data-ng-repeat="child in getNumber(children.number.value) track by $index">
        <!-- loads of dynamic stuff here -->
    </div>

Это действительно странно, как в настольных браузерах. У меня нет проблем, когда я добавляю похожие формы в представления, которые не включены в модальные окна, функциональность работает так, как мы ожидали. Кто-нибудь испытал это раньше? Обратите внимание, что в моем индексе HTML у меня есть следующий метатег, который был предложен как решение по аналогичному вопросу

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />

Обратите внимание, что в консоли браузера ошибок нет, у меня даже нет предупреждений.