Proper way to bind using AngularJS UI Typeahead

Question

I'm receiving some numbers from a call that are representing states. Example:

 scope.states = [{
    'key': 1,
    'value': 'Alabama'
    },
    {
    'key': 2,
    'value': 'Alaska'
    }
 ];

I'm then using Angular's UI Bootstrap typeahead directive as follows:

<input type="text" ng-model="form.eoiEmployee.state | stateLookup" typeahead="state.key as state.value for state in states | filter:$viewValue | limitTo:8" class="form-control">

For my user's model value, I'm being passed a 1 from the server, which is fine, I just need to display "Alabama" in the UI, instead of 1. I tried adding a filter of stateLookup to my model, but I'm receiving this error: "[ngModel:nonassign] Expression 'form.eoiEmployee.state | stateLookup' is non-assignable." Any ideas? Here is my filter.

.filter('stateLookup', function (Enum) {
  return function (input) {
    return Enum.stateLookup(input);
  };
});

And my Enum service call if needed.

stateLookup: function(id) {
  angular.forEach(StateType, function(state) {
    if(state.key === id) {
        return state.value;
    }
  });
}