AngularJS - Проверьте, виден ли элемент с NG-IF в DOM

Question

У меня есть форма Angular, в которой есть текстовые поля, флажки и поля выбора.

Итак, в основном в одном разделе формы есть флажок и раскрывающийся список.

Когда вы go переходите на страницу, флажок устанавливается по умолчанию (как показано выше)

Затем, если пользователь снимает или снимает флажок флажок, это отобразит раскрывающийся список под ним (снимок экрана ниже).

Цель состоит в том, когда мы снимаем флажок с опции Check me out, он покажет раскрывающийся список, а затем автоматически выберите значение «по умолчанию» из доступных параметров в раскрывающемся списке.

Например, у меня есть 4 варианта. Я могу установить значение «по умолчанию» на другой странице, которая работает нормально.

Объект JSON выглядит так при извлечении при загрузке страницы:

[
   {
       id: 1,
       title: 'Hello Earth',
       isDefault: false
   },
   {
       id: 2,
       title: 'Hello Paris',
       isDefault: true
   },
   {
       id: 3,
       title: 'Hello there',
       isDefault: false
   }

]

CODE

This так выглядит код

<input ng-click="onClickCheckMeOut()" id="checkMeOutOpt" name="checkMeOutMarketing" class="checkbox-input js-checkbox" type="checkbox" ng-model="checkMeOutMarketing.option" ng-checked="checkMeOutMarketing.option" ng-required="false">

<select ng-if="showCheckOptions && showMarketing && hasMarketingOptions" id="checkMeOutSelection" name="checkMeOutMarketingOptions" class="form-control" ng-model="checkMeOutMarketing.selection" ng-required="true">
   <option value="blah blah">blah blah</option>
   ...
   </option>
</select>

Затем для кода JS:

function appController() {
   ....
   $scope.init = () => {
      $scope.showMarketing = true;
   };
   ...
   $scope.onClickCheckMeOut = () => {
      // basically this will fetch the dropdown options and change hasMarketingOptions to true
      // the other flag showCheckOptions has been automatically changed by other function
   };
}

После снятия флажка отображается раскрывающийся список.

Сейчас проблема в том, что когда я вручную устанавливаю значение по умолчанию (если на другой странице не задано значение по умолчанию), я создаю функцию, которая будет это делать, но я не могу проверить, есть ли раскрывающийся список, который имеет NG-IF существует в DOM.

if (typeof checkMeOutMarketingOptions !== 'undefined') {
   ...
   const dropdown = angular.element("#checkMeOutSelection");
   if (dropdown.length > 0) {
      // manually set a default value here
   }
}

Короче говоря, выпадающий элемент с NG-IF появляется только тогда, когда я убрал галочку. Таким образом, модель для проверки выпадающего списка дает мне 0 вместо 1 и не обновляется соответствующим образом.

Есть ли способ, как я могу проверить для элемента DOM, который имеет NG-IF, так что я можно вручную установить значения выпадающего меню? Большое спасибо!