javascript - Horizontal dropdown select with images -

i have classic select dropdown, data-bound angular.

<select class="form-control" ng-model="category">    <option value="work">work</option>    <option value="home">home</option>    <option value="practical">practical</option>    <option value="no">no category</option> </select> 

i these dropdown options horizontal images, instead of vertical text. not this:

select button

• work
• home
• practical

but this:

select button

work image - home image - practical image

i've been playing display: inline-blocks, floats (yikes) , thinking radio buttons considering this question. i'm trying learn angular no jquery please. thank you

there limitations on how can style selects. you'd either have pick 1 of numerous stylable select plugins out there or roll own so

<div ng-app="app">     <div ng-controller="ctrlr">         <span ng-repeat="entry in categories">             <img ng-click="setcategory(entry)" ng-src="{{entry.src}}">         </span>         <div>selected = {{category}}</div>     </div> </div>  <script>     angular.module('app', []);     angular.module('app').controller('ctrlr', function ($scope) {         $scope.categories = [             {                 code: 'work',                 src: 'work.png'             },             {                 code: 'home',                 src: 'home.png'             },             {                 code: 'practical',                 src: 'practical.png'             },             {                 code: 'no',                 src: 'no category.png'             }         ];          $scope.setcategory = function (entry) {             $scope.category = entry.code;         }     }); </script>