how to select particular value from uib-typeahead in input tag

Question

Hello everyone i am trying to select single value from uib-typeahead group of values,can any buddy tell me how can i achieve that.Thank you

  <div class="col-md-12 col-sm-12 col-lg-12 nopadding">
   <label for="company">Company/Project*</label>
    <input type="text" class="form-control" data-ng-model="formInfo.company" 
      name="company" ng-disabled="loadingCompanyDetails" ng-blur="fetchCompanyDetail()"
     ng-change="resetLocation()" placeholder="Company Name" 
     uib-typeahead="company for company in companyList | filter:$viewValue | limitTo:10"
     id="company" autocomplete="off" required>
  </div>

above is my code where on typing any value its giving auto list of options ,so how can i get single value as default selected value from that list,at first time i dont want to type in input tag and it gives list of values,instead of this i want it will select by default one value out of that list.

here is controller code:

        $scope.fetchCompanyList = function () {
      uploadService.getCompanyList()
        .then(function (response) {
            $scope.companyList = response.data;
          },
          function (error) {
            $scope.errorMessage = error.status + " : " + error.statusText;
            if (error.status === 401) {
              loginService.authenticationError();
            }
          }
        );
    };

    /**
     * Method to fetch company details
     */
    $scope.fetchCompanyDetail = function () {
      if ($scope.formInfo && $scope.companyList.indexOf($scope.formInfo.company) >= 0) {
        $scope.company = {};
        $scope.loadingCompanyDetails = true;
        $scope.hideCompanyAboutUs = true;
        $scope.getCompanyDetails($scope.formInfo.company);
      }
    };

here is my screen shots of application. when user type its give list of options.

what actually i want it will select by default one selected value in input box.

Thanks

Answer 1

I don't know your full code but enough to define ng-model.

I suggest you to use id to identify selected object:

  $scope.company = {
    id: 2, 
    name: 'Bert'
  };   

And your input will look like:

typeahead-loading="loading" typeahead-no-results="noResults" class="form-control input-sm" autocomplete="off" required>

JS:

$scope.companyList = [
    {'id': 1, 'name': 'Aaron'},
    {'id': 2, 'name': 'Bert'},
    {'id': 3, 'name': 'Cesar'},
    {'id': 4, 'name': 'David'},
    {'id': 5, 'name': 'Elsa'}];


  $scope.company = {
    id: 2, 
    name: 'Bert'
  };                  

  $scope.selectTypeAhead = function($item)  {
    $scope.company.id = $item.id;
  };

Demo Plunker

---

So if you don't get proper model - that means formInfo.company is not defined properly.

You can easily validate it by typing in HTML:

<pre>{{formInfo|json}}</pre> 

Answer 2

In addision, you can set value by id:

In ES6

$scope.company = $scope.companyList.filter(comp => comp.id == 2)[0]

$scope.companyList = [
    {'id': 1, 'name': 'Aaron'},
    {'id': 2, 'name': 'Bert'},
    {'id': 3, 'name': 'Cesar'},
    {'id': 4, 'name': 'David'},
    {'id': 5, 'name': 'Elsa'}];