Динамический предварительный выбор опции с помощью select2

Question

Я пытаюсь динамически настроить параметры в раскрывающемся списке select2 при изменении поля моего форума. Обычно, чтобы загрузить select2, предварительно заполненный опциями, вы добавляете атрибут «selected = 'selected'» в тег опции, но это не работает, когда вы динамически загружаете опции, которые зависят от выбора другого выпадающего списка select2. Вот код, который делает «темы» зависимыми от «форума»

function showForumTopics(forum){
    c.forumTopics = forum.topics;
    $('.cm-widget-post .cm-select2-topic .cm-select2').select2('destroy');
    var template = $compile('<option data-ng-value="topic.id" data-ng-repeat="topic in c.forumTopics">{{topic.name}}</option>')($scope);
    $(function () {
        $.extend($.fn.select2.defaults, {
            formatSelectionTooBig: function (limit) {
                return c.data.msg.topicLimitExceededMsg;
            }
        });

        $('.cm-widget-post .cm-select2-topic select.cm-select2').html(template).select2({
            minimumResultsForSearch: 10,
            maximumSelectionSize : c.data.maxTopicLimit
        });
    });

    $('#choose_topics_div').on('keydown',function(e){
        if($('#choose_topics').val() && c.data.maxTopicLimit<=$('#choose_topics').val().length){ 
            if((e.code || e.which) != 9){
                e.preventDefault();
            }
        }
    });
    try{$scope.$digest();}catch(e){}
    if(!c.showWidgetView) {
        if(c.forumTopics && c.forumTopics.length > 0)
            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", false);
        else
            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", true);
    }
}


function filterForums(){
    c.filteredForums = $filter('filter')(c.flatForumList, function(forum){
        var match = false;
        angular.forEach(forum.contents_allowed, function(content){
            if(content.id == contentType && content.access.indexOf('content_write') > -1){
                match = true;
                return;
            }               
        });
        return match;
    });

    $timeout(function(){
        $('.cm-widget-post .cm-select2-forum div.cm-select2').select2('destroy');
        var template = '<option value=""></option>'+
                '<option data-ng-if="c.showForumOption(forum)" data-ng-value="forum.sys_id" ' +
                'data-ng-repeat="forum in c.filteredForums">{{forum.name}}</option>';

        $('.cm-widget-post .cm-select2-forum select.cm-select2')
            .html($compile(template)($scope)).select2({minimumResultsForSearch: 10});       
        try{
            $scope.$digest();
        } catch(err) {
            console.error(err)
        }           

        $timeout(function(){
            if(preSelectedForumId){
                $('.cm-widget-post .cm-select2-forum .cm-select2')
                    .select2('val', preSelectedForumId)
                    .prop("disabled", true);
                if(c.data.topicsEnabled)
                    showForumTopics(preSelectedForum);
            }
        });

    });
}

и вот код переднего конца HTML

<div class="col-xs-12 form-group cm-select2-forum padder-t" data-ng-if="!c.forumPage">
        <label for="choose_forum" class="control-label label-text padder-b-xs">${Forum}</label>
        <select id="choose_forum" class="cm-select2 forum-width" title="${Forum}" aria-required="true">
          <option value=""></option>
        </select>
      </div>
      <div id="choose_topics_div" class="col-xs-12 form-group cm-select2-topic padder-t" data-ng-if="c.data.topicsEnabled">
        <label for="choose_topics" class="control-label label-text padder-b-xs">${Topic(s)}</label><span class="text-optional">${ (optional)}</span>
        <select id="choose_topics" class="cm-select2" multiple="multiple" title="${Topics}">
          <option value=""></option>
        </select>
        <div class="note-text">{{c.data.msg.topicNoteMsg}}</div>
      </div>