angularjs bootstrap typeahead return child

Question

My input binds to object line.product however typeahead is returning the list of pairs of products and supplier. The current ps.product as ps.product.code for ps in getProductSupplierRefList($viewValue) does not return the expected product.

<input ng-model="line.product"
                               class=" form-control"
                               typeahead="ps.product as ps.product.code for ps in getProductSupplierRefList($viewValue)"
                               typeahead-loading="isLoading"
                               typeahead-on-select="productSupplierSelected($item, line)"
                               typeahead-template-url="productSupplierRefList.html"/>

getProductSupplierRefList calls webapi and return a list of ProductSupplierRefModel:

public class ProductSupplierRefModel
{

    public ProductRefModel Product { get; set; }

    public SupplierRefModel Supplier { get; set; }

}

The product code is expected in text control:

Any suggestion pls?

Answer 1

use typeahead-input-formatter to show the code. looks like ps.product as ps.product.code is not working???

<input ng-model="line.product"
                               type="text"
                               class=" form-control"
                               ng-keyup="getProductSupplierRefList($event)"
                               typeahead="ps.product as ps.product.code for ps in filterProductSuppliers"
                               typeahead-loading="isLoading"
                               typeahead-input-formatter="formatProduct($model)"
                               typeahead-wait-ms=500
                               typeahead-on-select="productSupplierSelected($item, line)"
                               typeahead-template-url="productSupplierRefList.html" /> 

where the formatter is:

$scope.formatProduct=function(model) {
        return model ? model.code : '';
    }

the product code now appears as expected: