AngularJS - how to sync result of calculated input field to a scope variable -

i'm trying sync result of calculated form field scope variable. example:

<div class="form-group">   <label for="val1" class="control-label">val 1</label>   <input class="form-control" name="val1" type="number" ng-model="data.val1" id="val1"> </div> <div class="form-group">   <label for="val2" class="control-label">val 2</label>   <input class="form-control" name="val2" type="number" ng-model="data.val2" id="val2"> </div> <div class="form-group">   <label for="score" class="control-label">score</label>   <input class="form-control" name="score" value="{{data.val1+data.val2}}" type="text" id="score"> </div> <br/>data: {{data}} 

how can sync result (i.e. score field) scope variable $scope.data.score? have tried ng-model="data.score" breaks calculation.

you can see example in action here: http://plnkr.co/edit/fc9xcyyygtak0agvv35t?p=preview

how last line read data: {"val1":1,"val2":2,"score":3}?

note i'm looking solution involves minimal no code support @ controller level. example, know can set watch in controller both val1 , val2 , update score in watcher. wanted avoid, if it's possible in angular @ all. if it's not (theoretically) possible, i'd appreciate explanation of why it's not.

a quick background might help. have simple form builder app defines form , fields in xml file. here's sample of xml like:

<form name="test">     <field name="val1" control="textbox" datatype="number">         <label>val 1</label>     </field>     <field name="val2" control="textbox" datatype="number">         <label>val 2</label>     </field>     <field name="score" control="textbox" datatype="number">         <label>score</label>         <calculate>[val1]+[val2]</calculate>     </field>     </form> 

when form requested, system need pick xml, loop through fields , generate angular style html served browser , processed angular. ideally, want keep form specific logic (validation, show/hide, calculation etc) confined html, , keep controller (js) logic generic forms.

the solution can come dynamically load watcher functions, through this: eval("$scope.$watch('[data.val1,data.val2]')..."), said, want avoid this, because it's tedious, , feels extremely dodgy :)

the first dirty way.

in case can move logic controller html using combination of ng-init , ng-change directives.

<div class="form-group">   <label for="val1" class="control-label">val 1</label>   <input class="form-control" name="val1" type="number" ng-model="data.val1" ng-change="data.score = data.val1 + data.val2" id="val1"> </div> <div class="form-group">   <label for="val2" class="control-label">val 2</label>   <input class="form-control" name="val2" type="number" ng-model="data.val2" ng-change="data.score = data.val1 + data.val2" id="val2"> </div> <div class="form-group" ng-init="data.score = data.val1 + data.val2">   <label for="score" class="control-label">score</label>   <input class="form-control" name="score" ng-model="data.score" type="text" id="score"> </div> <br/>data: {{data}} 

i don't think it's clearest solution, can leave controller without changes it.

demo on plunker.

the second dirty way.

there 1 more way, don't need ng-init , ng-change directives. can add 1 dirty expression in html:

<div id="main-container" class="container" style="width:100%" ng-controller="maincontroller"> {{data.score = data.val1 + data.val2;""}} <!-- key point --> <div class="form-group">   <label for="val1" class="control-label">val 1</label>   <input class="form-control" name="val1" type="number" ng-model="data.val1" id="val1"> </div> <div class="form-group">   <label for="val2" class="control-label">val 2</label>   <input class="form-control" name="val2" type="number" ng-model="data.val2" id="val2"> </div> <div class="form-group">   <label for="score" class="control-label">score</label>   <input class="form-control" name="score" ng-model="data.score" type="text" id="score"> </div> <br/>data: {{data}} 

;"" in expression stops evaluating of angular expression text in html.

demo on plunker.