Angular JS UI Bootstrap Typeahead

Question

I have a problem with the Angular JS UI Bootstrap extension typeahead.

I want to create a product search with the help of typeahead, but however I am struggling with displaying the result list.

I am able to return from a controller the query I make on my products with the entered value in my input field.

I appreciate your help!

HTML Page:

<pre>{{productsearchs | json}}</pre>
<input type="text" class="form-control" placeholder="Which product?" ng-model="selectedProduct" typeahead="productsearch as productsearch.name for productsearch in searchProduct($viewValue)">

Angular Controller:

// ## Suchen von Produkten nach User Eingabe
$scope.searchProduct = function (val) {
    var productsearch = Product.query({name: val}, function () {
        return $scope.productsearch = productsearch;
    });
}

What I see in the frontend:

https://i.sstatic.net/14mhk.png

Answer 1

I found a solution here on Stackoverflow, in JustMaier's Post is the solution - hope that helps everyone else.

How to populate Angular UI Bootstrap Typeahead with newest $resource