title: Bind an amp-state's initial value
body: <p>I want to initialise an amp-state as follows:</p>
  
  <pre><code>&lt;amp-state id="tabs"&gt;
    &lt;script type="application/json"&gt;
    {
      "selected": "latest"
    }
    &lt;/script&gt;
  &lt;/amp-state&gt;
  </code></pre>
  
  <p>Then have this initialised value shown on first page request:</p>
  
  <pre><code>&lt;p [text]="tabs.selected"&gt;&lt;p&gt;
  </code></pre>
  
  <p>This doesn't work. The contents of the p tag are only updated when there is a state change. Eg from a button:</p>
  
  <pre><code>&lt;button on="tap:AMP.setState({tabs: {selected: 'top'}})"&gt;Press me&lt;/button&gt;
  </code></pre>
  
  <p>I would like elements on the page to reflect the initialised state before further user interaction.</p>
  
  <p>Codepen: <a href="https://codepen.io/powlo/pen/VMpVRm/?editors=1000" rel="noreferrer">https://codepen.io/powlo/pen/VMpVRm/?editors=1000</a></p>