title: HTML template filled in server-side and updated client-side
body: <p>I have a webpage with dynamic content. Let's say it's a product page. When the user goes directly to <code>example.com/product/123</code> I want to render my product template on the server and send html to the browser. However, when the user later clicks a link to <code>/product/555</code> I'd like to use JavaScript to update the template on the client-side.</p>
  
  <p>I'd like to use something like Knockout.js or Angularjs, but I don't see how I can pre-populate those templates with some initial data on the server and still have a functioning template on the client. i.e. If my Angular template is this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li ng-repeat="feature in features"&gt;
        {{feature.title}}
        &lt;p&gt;{{feature.description}}&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When the user goes directly to the URL, I need something that still works as an Angular template, but is filled in with the html for the current product. Obviously this doesn't work:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li ng-repeat="feature in features"&gt;Hello
        &lt;p&gt;This feature was rendered server-side&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;Asdf &lt;p&gt;These are stuck here now since angular won't replace them when
         it updates.... &lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It seems like my only option is to send the server-rendered html to the browser along with a separate matching template...?</p>
  
  <p>In that case, I'd like to avoid writing every template twice. Which means I need to either switch to JavaScript for my server language (which I would not be happy about) or choose a template language that compiles to both Java and JavaScript and then find a way to hack it into the Play Framework (which is what I'm currently using.)</p>
  
  <p>Does anyone have any advice?</p>