title: Calculated field not updating with Kendo-UI grid and AngularJS
body: <p>I have a kendo-ui grid with order lines.  There is a <code>Qty</code>, <code>Price</code> and <code>Total</code> column.  The Total column is calculated <code>( Qty x Price )</code>.</p>
  
  <p>For editing, I use a custom popup Window which displays some additional information and lets the user change the <code>Qty</code> and <code>Price</code>.  When they do this, I want the <code>Total</code> to update automatically in the custom edit form.</p>
  
  <p>Here is the grid's column definition for the total column:</p>
  
  <pre><code>{
     field: "total",
     title: "Total",
     width: 60,
     template: "#=qty*price#"
  }
  </code></pre>
  
  <p>Here is the input field in the edit form:</p>
  
  <pre><code>&lt;input name="total" style="width: 60px" /&gt;
  </code></pre>
  
  <p><strong>Here is the problem:</strong>  when I change the quantity or price in the edit form, the total gets updated only in the grid (which is underneath the pop-up edit form), but the total field in the edit form does not (it is empty).  </p>
  
  <p>As a test, I put both <code>#=total#</code> and <code>#=qty*price#</code> in the edit form;</p>
  
  <ul>
  <li>the former is null</li>
  <li>the latter is the static number that was the result of the
  calculation when the form was rendered</li>
  </ul>
  
  <p>it does not get updated.</p>
  
  <p>Here is a Plunker that shows the issue:
  <a href="http://plnkr.co/edit/cZw18btauqb9RPEpd5Kc?p=preview" rel="nofollow">http://plnkr.co/edit/cZw18btauqb9RPEpd5Kc?p=preview</a></p>
  
  <p><strong>How to make the total field in the edit form calculated?</strong>
  (preferably using the Kendo-ui template mechanism or AngularJS, but a jQuery hack would do as a last resort)?  </p>