use amp-selector within amp-list

Question

Is it possible to use amp-selector within amp-list? On page load, the items are rendered, but when the filter is applied, the items do not render.

<!-- Filter Macros -->
<amp-bind-macro id="USFilter" expression="regions.US ? model.region == 'US' : false"></amp-bind-macro>

<amp-bind-macro id="UKFilter" expression="regions.UK ? model.region == 'UK' : false"></amp-bind-macro>

<amp-bind-macro id="filteredModels" expression="models.items[0].models.filter( model => USFilter() || UKFilter() )"></amp-bind-macro>


<!-- display models -->
<div class="center">
  <amp-list width="auto" height="800" [height]="60 * filteredModels().length" layout="fixed-height" src="/data.json" [src]="filteredModels()">
    <template type="amp-mustache">
      <div class="">

        <amp-selector layout="container" name="">
          <ul>
            {{#models}}
            <li class="modelOption" option="{{name}}" value="{{name}}">
              <div class="model-selector">
              <strong>{{name}}</strong>
            </div>
            </li>
            {{/models}}
          </ul>
        </amp-selector>
        
      </div>
    </template>
  </amp-list>
</div>

This is the data:

{
  "items": [{
    "models": [
      {
        "name": "Tshirt 1",
        "region": "US"
      },

      {
        "name": "Tshirt 2",
        "region": "US"
      },

      {
        "name": "Tshirt 3",
        "region": "US"
      },

      {
        "name": "Tshirt 4",
        "region": "UK"
      },

      {
        "name": "Tshirt 5",
        "region": "UK"
      },

      {
        "name": "Tshirt 6",
        "region": "UK"
      }
    ]
  }]
}