title: How to prefill a calculation form with initial values?
body: <p>I've a long calculation form and want to prefill some values for displaying initial results. These initial values should live in the template to have these easily editable. It seems, the angular way is to use a directive which reads the input value fields and initializes the app with these values.</p>
  
  <p>Here is one way to to set the model value from the input field:</p>
  
  <pre><code>&lt;input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial&gt;
  </code></pre>
  
  <p>Coffeescript:</p>
  
  <pre><code>app = angular.module 'forms', []
  
  app.directive 'ngInitial', -&gt;
    restrict: 'A'
    controller: ['$scope', '$element', '$attrs', '$parse', ($scope, $element, $attrs, $parse) -&gt;
      val = $attrs.sbInitial || $attrs.value
      getter = $parse($attrs.ngModel)
      setter = getter.assign
      setter($scope, val)
  ]
  </code></pre>
  
  <p>Source: <a href="https://stackoverflow.com/questions/13769732/angular-js-init-ng-model-from-default-values">Angular js init ng-model from default values</a></p>
  
  <p>Unfortunately this doesn't work in my app. The values are displayed but the results aren't calculated. I have to manual fill out the fields in the browser to start the calculation.</p>
  
  <p>The input fields are watched in my controller, like so:</p>
  
  <pre><code>$scope.$watch(
    'inputValues.permeatCapacity',
  
    function (newValue, oldValue) {
      if (newValue === oldValue) {
        return;
      }
  
      permeatCapacity = $scope.inputValues.permeatCapacity;
      permeatPerDay = permeatFactory.getPermeatPerDay(permeatCapacity);
  
      $scope.permeatPerDay = $filter('number')(permeatPerDay, 2);
    }
  );
  </code></pre>
  
  <p>What's the best directive for this problem or is there a better way in Angular.js?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've just found a really dirty way in the controller to update the input fields after initialization that make use of the bound calculations. It not only feels like an bad idea, the initial values also don't live in the template:</p>
  
  <pre><code>$timeout(function () {
    $scope.inputValues.overallRecovery = 40;
    $scope.inputValues.permeatCapacity = 7.2;
  }, 0);
  </code></pre>
  
  <p>In comparison, this initial object in my controller fills out the fields but doesn't trigger the watchers (important for the bound calculations):</p>
  
  <pre><code>$scope.inputValues = {
    overallRecovery: 40,
    permeatCapacity: 7.2
  };
  </code></pre>
  
  <p>But there is a better way to do this, isn't it?</p>