title: Computed values in angular-schema-form
body: <p>I have a form which is used to enter a bunch of values.  I  want to show various calculation on the values, but dynamically, so that when a number is changed the results immediately update.  I thought that this should work, but it doesn't - i.e. the calculation is never run:</p>
  
  <pre><code>angular.module('calcs', ['schemaForm'])
    .controller('CalcCtrl', function ($scope) {
      $scope.schema = {
        type: 'object',
        properties: {
          width: {
            type: 'number',
            title: 'Width'
          },
          depth: {
            type: 'number',
            title: 'Depth'
          }
        }
      };
      $scope.form = ['*'];
      $scope.model = {};
  
      $scope.$watch('[model.width, model.depth]', function() {
        // This function is never called
        $scope.area = $scope.model.width * $scope.model.depth;
      });
    });
  </code></pre>
  
  <p>I have seen <a href="https://stackoverflow.com/questions/29026254/angular-schema-form-how-can-i-create-a-total-field">this question</a>, but I am doing quite a number of calculations and I really don't want to have to create a directive for each, so I am hoping there is another way.  For reference, here is my template:</p>
  
  <pre><code>&lt;div ng-controller="CalcCtrl"&gt;
    &lt;form sf-schema="schema" sf-form="form" sf-model="model"&gt;&lt;/form&gt;
    &lt;p&gt;Area: {{area}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>