title: Angular, two way binding with two variables
body: <p>I have two variables that are related by a function, and the user should be able to change one or the other in an input field which should automatically change the other.</p>
  
  <p>How can I do that, right now I'm just using <code>$watch</code> for both.</p>
  
  <p>Here's some sample code and a <a href="http://jsfiddle.net/ffu6K/" rel="noreferrer">fiddle</a>.</p>
  
  <p>JS,</p>
  
  <pre><code>angular.module("test", [])
  .controller("MyController", function ($scope) {
      $scope.letter = 'A';
      $scope.number = 1;
      $scope.map = { 'A': 1, 'B': 2, 'C': 3, 'D': 4 };
  
      $scope.$watch('letter', function(new_val, old_val){
          if(new_val != old_val){
              $scope.number = $scope.map[new_val];
          }
      });
      $scope.$watch('number', function(new_val, old_val){
          ...
      });
  });
  </code></pre>
  
  <p>HTML,</p>
  
  <pre><code>&lt;div ng-app="test"&gt;
      &lt;div ng-controller="MyController"&gt;
          &lt;input ng-model="letter" /&gt;
          &lt;input type="number" ng-model="number" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>