AngularJs auto-complete Панель поиска с раскрывающимся списком, имеющим изображения с текстом

Question

Мне нужно реализовать раскрывающийся список с параметрами, имеющими как изображения, так и соответствующий текст, где пользователь может вводить поисковый запрос, и с каждой клавишей удаляет выпадающий список обновления. Для достижения этой функциональности я использовал Angular-Strap typeheads.

Это мой angularjs сниппеты -

$scope.productsDisplayed = $scope.allProducts.map(function(product, index) { 
    return { 
    value: product.Name, 
    Name: product.Name, 
    Brand: product.Brand, 
    Image: product.Image, 
    _id: product._id, 
    label: "<img src = '" + product.Image + "'> " + product.Name 
    } 
}); 

Это мой фрагмент кода HTML -

<input ng-model="selectedProduct" bs-options="product as product.label for product in productsDisplayed" placeholder="Enter Product Name" bs-typeahead type="text"> 

Поиск работает и я могу искать относительные продукты с каждой клавиши штрихами.

Проблема

Я получаю ссылку изображений в выпадающем списке вместо самих изображений - Ex - DropDown заходы выглядеть следующим образом =>

<img src = '/test/image/upload/v0000000000/products/abcdefghi.jpg'> " + Deodrant 

Query

Как я могу получить фактические изображения продуктов с их именами в выпадающем списке?

Просьба не предлагать angucomplete-alt, поскольку я пытался использовать его &, обнаружил, что библиотеки намного медленнее по сравнению с головками типа углового ремешка. Кроме того, у меня есть изображения на этих ссылках, поэтому ссылки не ошибочны.

Answer 1

Использование bs-options="image.value as image.label for image in images"

JS

$scope.urls = { "Gear": 'https://dummyimage.com/100/000/f00.jpg&text=GEA', 
        "Globe": 'https://dummyimage.com/100/000/0f0.jpg&text=GLO', 
        "Heart": 'https://dummyimage.com/100/000/00f.jpg&text=HEA', 
        "Camera": 'https://dummyimage.com/100/000/fof.jpg&text=CAM' 
    }; 

    $scope.selectedImage; 
    $scope.images = [ 
    {value: 'Gear', label: '<img src="'+$scope.urls.Gear+'"> Gear' 
    }, 
    {value: 'Globe', label: '<img src="'+$scope.urls.Globe+'"> Globe' 
    }, 
    {value: 'Heart', label: '<img src="'+$scope.urls.Heart+'"> Heart' 
    }, 
    {value: 'Camera', label: '<img src="'+$scope.urls.Camera+'"> Camera' 
    } 
    ]; 

HTML

<input type="text" 
     class="form-control" 
     ng-model="selectedImage" 
     data-min-length="0" data-html="1" 
     data-auto-select="true" data-animation="am-flip-x" 
     bs-options="image.value as image.label for image in images" 
     placeholder="Enter image name" bs-typeahead> 

DEMO on PLNKR