Iterate on amp-state with amp-bind and amp-mustache

Question

I am trying to make a product page for an e-commerce site, the problem is that I do not know how to dynamically change the available sizes of the product depending on the color that the user chooses.

It occurred to me to do something like this, but I can't find a way to make amp-mustache know and iterate over the colors[selectedColor].sizes to show the sizes available for that color, any ideas??

Thank you!

<amp-list src=".../amp/{{ productId }}" items="." single-item=".">
    <template type="amp-mustache">
       <select name="color" on="change:AMP.setState({ selectedColor: event.value })">
            {{#colors}}
                <option value="{{color}}">{{color}}</option>
            {{/colors}}
        </select>
        <select name="size" class="input">
            {{#colors[selectedColor].sizes}}
                <option value="{{size}}">{{size}}</option>
            {{/colors[selectedColor].sizes}}
        </select>
    </template>
</amp-list>