title: AngularJS - how to sync result of calculated input field to a scope variable
body: <p>I'm trying to sync the result of a calculated form field into a scope variable. For example:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label for="val1" class="control-label"&gt;Val 1&lt;/label&gt;
    &lt;input class="form-control" name="val1" type="number" ng-model="data.val1" id="val1"&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="val2" class="control-label"&gt;Val 2&lt;/label&gt;
    &lt;input class="form-control" name="val2" type="number" ng-model="data.val2" id="val2"&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="score" class="control-label"&gt;Score&lt;/label&gt;
    &lt;input class="form-control" name="score" value="{{data.val1+data.val2}}" type="text" id="score"&gt;
  &lt;/div&gt;
  &lt;br/&gt;data: {{data}}
  </code></pre>
  
  <p>How can I sync the result (i.e. the score field) into the scope variable $scope.data.score? I have tried <code>ng-model="data.score"</code> but that breaks the calculation.</p>
  
  <p>You can see the example in action here:
  <a href="http://plnkr.co/edit/fc9XcyyYGtAk0aGVV35t?p=preview" rel="nofollow">http://plnkr.co/edit/fc9XcyyYGtAk0aGVV35t?p=preview</a></p>
  
  <p>How do I get the last line to read <code>data: {"val1":1,"val2":2,"score":3}</code>?</p>
  
  <p>Note that I'm looking for a solution that involves <strong>minimal to no code support at the controller level</strong>. For example, I know you can set up a watch in the controller for both val1 and val2 and then update the score in the watcher. This is what I wanted to avoid, if it's possible in angular at all. If it's not (theoretically) possible, I'd really appreciate an explanation of why it's not.</p>
  
  <p>A quick background might help. Basically we have a simple form builder app that defines a form and all its fields in an xml file. Here's a sample of what the xml would look like:</p>
  
  <pre><code>&lt;form name="test"&gt;
      &lt;field name="val1" control="textbox" datatype="number"&gt;
          &lt;label&gt;Val 1&lt;/label&gt;
      &lt;/field&gt;
      &lt;field name="val2" control="textbox" datatype="number"&gt;
          &lt;label&gt;Val 2&lt;/label&gt;
      &lt;/field&gt;
      &lt;field name="score" control="textbox" datatype="number"&gt;
          &lt;label&gt;Score&lt;/label&gt;
          &lt;calculate&gt;[val1]+[val2]&lt;/calculate&gt;
      &lt;/field&gt;    
  &lt;/form&gt;
  </code></pre>
  
  <p>When a form is requested, the system will need to pick up the xml, loop through all the fields and generate an angular style html to be served to the browser and processed by angular. Ideally, I want to keep all the form specific logic (validation, show/hide, calculation etc) confined to the html, and keep the controller (js) logic generic for all forms.</p>
  
  <p>The only solution I can come up with is to dynamically load watcher functions, through something like this: <code>eval("$scope.$watch('[data.val1,data.val2]')...")</code>, but as I said, I really want to avoid this, because it's just tedious, and feels extremely dodgy :)</p>