После изменения опций селекта (с помощью 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);
}
}
};
}]);
})();