UI Bootstrap typeahead value to be used by other typeahead objects

Question

I have a ui-bootstrap type-ahead that pulls the states from a JSON doc. It works. What I need is to take that selected value and use it in another objects to retrieve data based on that selection. When I call the $scope value of the input field with the type-ahead function the value isn't being pass? I guess,but when I use it as a drop-down select it works. What am I missing here?

State Type-ahead:

<input type=text ng-model="selectedState"typeahead="state.value for state in states | fileter: $viewValue | limitTo:3" ng-change="updateState()" placeholder="Enter State"/>

or State Drop-down select:

<select ng-options="state.value for state in states" ng-model="selectedState" ng-change="updateState()"></select>

controller:

$scope.updateState = function(){
  $scope.wCenters = wCenterFactory.get({state:$scope.selectedState.value});
};

Answer 1

Maybe try typeahead-on-select instead of ng-change? I think that passes the selected item in.