AngularJS update model value from custom directive

(A working plunker of the solution - http://plnkr.co/edit/nhlI4fSsK58mWS18RgUh?p=preview)

Here's a simple template to illustrate the usage:

<h1>Cascade sum example</h1>
<ul>
  <li ng-repeat="(key, input) in inputs">
    <input type="number" ng-model="input.value"
      formula="::input.formulaFn"/>
    <span>{{::key}}</span>
    <span ng-if="::input.formula">({{input.formula}})</span>
  </li>
</ul>

Firstly, we take the inputs from a database, and create a formula function for each one. The formula function, when called, produces a value for the given formula:

Inputs.getAll()
  .then(function(inputs) {
    $scope.inputs = inputs

    _.each($scope.inputs, function(input) {
      if (input.formula) {
        input.formulaFn = parseFormula(input.formula)
      }
    })
  })

  function parseFormula(expr) {
      var parsed = $parse(expr)
      return function apply() {
          return parsed($scope.values)
      }
  }

The meat is parseFormula. It uses angular's $parse to convert an expression(e.g 'A1+A2') into a function(plus(a,b)). if you called parsed with an object containing the properties A1 and A2, it would produce the sum of their values - this is what apply() is doing.

Our current object, $scope.inputs, can't be used to supply our parsed expressions with the needed values(it needs to look like 'A1': 1, instead of 'A1': { ... }). Unfortunately, we can't use the same object to hold both our values and our ng-models, due to angular's ng-repeat peculiarities with binding and primitives(you can read more about it here - https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat - this is also informally known as the "dot rule"). This is why we need to have both $scope.inputs(to provide our bindable models), and a synchronized $scope.values, which we'll use for our expressions.

$scope.values = {}
$scope.$watch('inputs', function(value) {
  $scope.values = _.mapValues($scope.inputs, function(input) {
    return input.value
  })
}, true)

The directive is fairly simple. If there's a formula on the element(this is actually the formula functions that we created earlier), it will watch it(this means that the function is called every digest). Once the formula produces a new value(e.g. for 'A1+A2', A1 or A2 were changed), then we simply synchronize the ngModel with it.

.directive('formula', function() {
  return {
    scope: {
      formula: '=',
    },
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if (!scope.formula) return
      element.attr('readonly', true)
      scope.$watch(scope.formula, function(value) {
        ngModelCtrl.$setViewValue(value)
        ngModelCtrl.$render()
      })
    }
  }
})