title: Setting selected attribute for loop with key and value
body: <p>I made a select box which accepts an associative array with key and value pairs. It only shows the value, but it passes the key to a javascript variable, which in turn is needed for an api call.</p>
  <p>When the user has made the api call, the id is stored in an url parameter. I want to use this, to set the selected option in the dropdown when the page reloads. This is the code:</p>
  <pre><code>&lt;select ng-model=&quot;ctrl.filterSettings.selectedCompany&quot; ng-change=&quot;ctrl.init({{ dashboard.year }}, {{ dashboard.month }}, ctrl.filterSettings.selectedCompany)&quot;&gt;
                                  {% for id, name in companies %}
                                      {% if id == selectedCompanyId %}
                                      &lt;option value=&quot;{{ id }}&quot; selected=&quot;selected&quot;&gt;{{ name }}&lt;/option&gt;
                                      {% else %}
                                          &lt;option value=&quot;{{ id }}&quot;&gt;{{ name }}&lt;/option&gt;
                                          {% endif %}
                                  {% endfor %}
                              &lt;/select&gt;
  </code></pre>
  <p>This works as intended. If in the url parameter I have an id of let's say 250, and that id is also part of the companies array, it sets the selected to that option. However, it also sets selected to the first option which seems to be generated by the for loop:</p>
  <pre><code>&lt;option value=&quot;? string: ?&quot;&gt;&lt;/option&gt;
  </code></pre>
  <p>This is the first empty option, where nothing is selected. But I want this removed when I have a companyId in the parameters.</p>
  <p>I have tried to remove the value from the options using javascript, but if I try that, the first option of my array is removed.</p>
  <p>Any help is greatly appreciated.</p>