Angular Bootstrap Typeahead dropdown

Question

I have an Angular ui-boostrap typeahead component that is working correctly until I added one requirement to the whole function. I want to call the backend for the suggested results just after user types in 3 letters. It is done correctly but my problem is that the results are visible only when users type in the 4th letter. Is there any way to bypass this, by forcing it to refresh the UI just after user types in the 3rd letter. Code is :

HTLM 
<input name="states" id="states" type="text" ng-model="vm.cityName"
uib-typeahead="municipality as  municipality.city + ' (' + municipality.name + ') '+municipality.zipCode for municipality in vm.getMunicipalitiesByCity($viewValue) | filter:$viewValue | limitTo:8" class="form-control" typeahead-on-select="vm.citySelected()" >

JS Controller
vm.getMunicipalitiesByCity = function (cityName) {
            if (cityName != undefined && cityName.length == 3) {
                CalculationEndpointService.municipalitiesByCity({cityName: cityName}, function (result) {
                    vm.municipalities = result.map(
                        function (item) {
                            return item;
                        }
                    );
                });
            }
            if(cityName.length<3){
                vm.municipalities=[""];
            }
            return vm.municipalities;
        };

Answer 1

you could use typeahead-min-length attribute. see https://angular-ui.github.io/bootstrap/#/typeahead