Select a value from typeahead shows Objec object

Question

I am working on Single Page Application and using Angular-TypeAhead when i write something in textbox it shows me suggestions but when i select the suggestion then the values of Textbox become Object object instead of name

here is my HTML Markup

<div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label><i class="fa fa-globe"></i> State</label>
        <input type="text" class="form-control" ng-model="selectedState" ng-options="state.FirstName for state in states" placeholder="Enter state" bs-typeahead>
      </div>
    </form>
  </div>

and here is my AngularJS code

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])

        .controller('TypeaheadDemoCtrl', function ($scope, $templateCache, $http) {

            $scope.selectedState = '';

            $http.get('/api/servicesapi/GetAllClients')
            .then(
                function (result) {
                    //success
                    $scope.states = result.data;
                },
                function () {
                    //error
                });

        });

see the images here

Answer 1

Change ng-options="state.FirstName for state in states" to ng-options="state as state.FirstName for state in states"

Answer 2

This is the solution in Angular 4 and not angularJS

I added [inputFormatter]="formatMatches" to format the input (ngmodel) and [resultFormatter]="formatMatches" to format the data displayed

<input id="typeahead-format" type="text" [(ngModel)]="clickedItem" 
    name="profile" (selectItem)="selectedItem($event)"
   [resultFormatter]="formatter" [inputFormatter]="formatter"
   [ngbTypeahead]="search" #instance="ngbTypeahead"/>

and the formatter function is like this:

formatter = (x: { label: string }) => x.label;

x: is the object