How to map one "model" to two fields?

I have a model with a "height" property that I want to allow users to edit as two separate fields, "feet" and "inches" but have them map to a single property "height" measured in inches.

Forms looks like this:

What's the best way to create a two-way binding between these fields and a single "height" property?

HTML:

<input type="number" ng-model="feet">
<input type="number" ng-model="inches">
<br>{{height}}

Controller:

$scope.feet = 2;
$scope.inches = 5;
$scope.$watch('feet * 12 + inches', function(value){
  $scope.height = value;
})

Plnkr

I modified @Mark's example a bit, removed $watch, I think It is excess

HTML

<input type="number" ng-model="calc.feet">
<input type="number" ng-model="calc.inches">
<br>{{calc.height()}}

Controller

$scope.calc = {
  feet: 2,
  inches: 5,
  height: function () { return this.feet * 12 + this.inches }
};

Plunkr