Как получить значение в AngularJS или JavaScript из <option>

Question

Я изо всех сил пытаюсь выбрать значение, когда клиент выбрал опцию, я пытался с чистым JS с document.querySelector(), но по какой-то причине он не показывает, какой вариант, что клиент выбрал причину из списка reasonList, я Мне было интересно, что является лучшим решением или кодом в angularJS, который автоматически может показать выбранное значение из опции, а также в чистом AngularJS 1.5, поэтому я не эксперт в этой среде, чтобы прояснить, что мне нужно сделать, это:

1) Когда клиент выбрал причину из формы 2) Мне нужно получить или выбрать причину, по которой клиент выбрал создание всплывающей подсказки о том, что это правильная причина

но для второго я попробовал с var control = document.querySelector('select[ng-model="contactForm.reason"]');, но это не правильно, потому что это показывает это: [! [QuerySelector ()] [1]] [1]

поэтому я попытался с помощью этого создать идентификатор, чтобы легко выбрать:

<select
required="required"
class="form-control form-control-sm"
id="id-info">
{% for category, reasons in reasonList %}
    <optgroup label="{{ category }}">
    {% for key, reason in reasons %}
    <option value="{{ key }}" id="showMe">{{ reason.name }}</option>
    {% endfor %}
    </optgroup>
{% endfor %}
</select>

используя этот код, который я считал хорошей идеей, но

var elem = document.getElementById("id-info");

  elem.onchange = function(){
    let hiddenDiv = document.getElementById("showMae");
    console.log(hiddenDiv);
  };

это "работает", потому что возвращает это значение:

<option value="1" id="showMe">¿Dónde está mi pedido?</option>

но в то же время ... это неправильно ... потому что, если клиент меняет вариант на другой, результат остается тем же с этим <option value="1" id="showMe">¿Dónde está mi pedido?</option>

так что ... мне нужны эти "лучшие решения" для

1) он возвращает точное значение, а не полный элемент: <option value="1" id="showMe">¿Dónde está mi pedido?</option> он должен возвращать только "¿Dónde está mi pedido?"

2) он должен изменить значение на то, которое выбрал клиент ... потому что все время это <option value="1" id="showMe">¿Dónde está mi pedido?</option>

Следующий код, где я могу установить список причин и все:

function fillReasonOptions(reasonList) {
    //---------------REASON Options -----------
    console.log(reasonList);
    //---------------END REASON Options -----------
    angular.forEach(reasonList, function(value, key) {
    angular.forEach(value, function(value, key) {
        this.reasonList[key] = value;
    });
    });
}

function reasonValidationOrder(selectedReason) {
    if (
    selectedReason &&
    this.reasonList[selectedReason].orderNumberRequired
    ) {
    return true;
    }

    return false;
}

В html-файле:

      <select
        required="required"
        class="form-control form-control-sm"
        ng-model="contactForm.reason"
        id="id-info">
        {% for category, reasons in reasonList %}
          <optgroup label="{{ category }}">
            {% for key, reason in reasons %}
            <option value="{{ key }}" id="showMe">{{ reason.name }}</option>
            {% endfor %}
          </optgroup>
        {% endfor %}
      </select>

Answer 1

Пожалуйста, обновите:

1. Change id = "showMe" -> id = "{{key}}"

<select
            required="required"
            class="form-control form-control-sm"
            ng-model="contactForm.reason"
            id="id-info">
            {% for category, reasons in reasonList %}
              <optgroup label="{{ category }}">
                {% for key, reason in reasons %}
                <option value="{{ key }}" id="{{ key }}">{{ reason.name }}</option>
                {% endfor %}
              </optgroup>
            {% endfor %}
          </select>

2. В случае обмена вы можете использовать jquery, чтобы получить выбранный элемент

var elem = document.getElementById("id-info");

elem.onchange = function(){
	//let hiddenDiv = document.getElementById("showMe");
	let hiddenDiv = $(this);
	console.log(hiddenDiv);
};