Update amp-list data source without form - html

Question

I have an amp-list and I want to update its src dynamically without using form, just using a bunch of button divs that use data from amp-state that changes on tap on an element.
For example, tapping #elementOne will change product.currentIndex to 1, so list's [src] will change to 'localhost/example/data?page=' + product.currentIndex = 'localhost/example/data?page=1', hence the amp-list will be updated after src change.
Here's what I've tried so far:
<amp-state id="product">
<script type="application/json">
{
"page": 0
}
</script>
</amp-state>
<amp-state id="productState"
[src]="'localhost/example/data?page=' + product.page"
src="localhost/example/data?page=0"></amp-state>
<div role="button" tabindex="0" on="tap:AMP.setState({product: {page: 1 }})">
<span>Page One</span>
</div>
<div role="button" tabindex="0" on="tap:AMP.setState({product: {page: 2 }})">
<span>Page Two</span>
</div>
<amp-list width="auto" height="1024" layout="fixed-height"
src="localhost/example/data" [src]="productState.items">
<template id="product-item-template">
<!-- A template -->
</template>
</amp-list>
Is there a way to do this without using form?

Answer 1

Just simply bind the src attribute of the amp-list to the calculated url string, like this:
[src]="'/example/data/?page=' + product.page"
Your markup should look like this:
<amp-list width="auto" height="1024" layout="fixed-height"
src="localhost/example/data" [src]="'/example/data/?page=' + product.page">
<template id="product-item-template">
<!-- A template -->
</template></amp-list>