После изменения опций селекта (с помощью jQuery) AngularJS "не видит" выбираемую опцию

Имеется приложение на AngularJS v1.4.14 и twig-шаблон веб-формы, в которой в т.ч. есть тег селект

<select id="selectCourses" class="input-select" data-ng-model="fields.course" data-courses="form.courses" data-defnone="Выберите курс" required></select>

Опции к нему добавляются с помощью директивы AnglarJS (courses) из объекта JSON form.courses. Внутри этой директивы ипользуется jQuery (v3.2.1), который сначала очищает список опций, а потом аппендит к селекту новый список опций.

Надо сказать, что в оформлении выпадающего списка также задействован плагин jQuery Form Styler и Bootstrap 3.

Состав опций селекта зависит от радиопереключателя (2 варианта, один из которых дефолтный), которые вызывают функцию для изменения объекта form.courses.

При первоначальной загрузке страницы с формой (дефолтный список) все срабатывает нормально, директива выполняется, список формируется, выбираемый пользователем пункт передается в контроллер AngularJS благодаря data-ng-model="fields.course".

Но после использования радиопереключателя AngularJS перестает "видеть" выбираемую опцию селекта, т.е. fields.course не изменяется вслед за пользовательским выбором.

Попытка использовать $scope.$applay() в директиве вызывает ошибку - типа, уже используется.

Дополнительный код.

Радиопереключатели в форме:

<input class="input-radio" type="radio" value="offline" data-ng-model="fields.courseType" name="courseType" ng-change="changeCourseType('offline')" required>
<input class="input-radio" type="radio" value="pdf" data-ng-model="fields.courseType" name="courseType" ng-change="changeCourseType('pdf')" required>

Директива AngularJS:

(function() {
    var m = angular.module('utils');

    m.directive('courses', [function() {
        return {
            require: 'ngModel',
            priority: 1,
            link: function(scope, elm, attrs, ngModel) {
                if (attrs.courses) {
                    scope.$watch(attrs.courses, function() {
                        var list = scope.$eval(attrs.courses);
                        jQuery(elm).html('');
                        var catI;
                        var corI;
                        var group;
                        for (catI in list) {
                            group = $('<optgroup>').attr('label', catI);
                            for (corI in list[catI]) {
                                group.append($('<option>')
                                    .val(list[catI][corI].id)
                                    .html(list[catI][corI].title));
                            }
                            jQuery(elm).append(group);
                        }
                        jQuery(elm).trigger('refresh'); //нужно обновить jQuery Form Styler
                        jQuery(elm).val(ngModel.$viewValue);
                    }, true);
                }
            }
        };
    }]);
})();

Ответы (0 шт):