Bind an amp-state's initial value

I want to initialise an amp-state as follows:

<amp-state id="tabs">
  <script type="application/json">
  {
    "selected": "latest"
  }
  </script>
</amp-state>

Then have this initialised value shown on first page request:

<p [text]="tabs.selected"><p>

This doesn't work. The contents of the p tag are only updated when there is a state change. Eg from a button:

<button on="tap:AMP.setState({tabs: {selected: 'top'}})">Press me</button>

I would like elements on the page to reflect the initialised state before further user interaction.

Codepen: https://codepen.io/powlo/pen/VMpVRm/?editors=1000