Angularjs select option with image

How to create these select?

I'm trying to create a example about "angularjs select option with image" or "angularjs select option with custom format value", but I see that we can't use <select> because you can't not nested html tags in <option> value.
You can't do

  <select multiple ng-model="selectedValues" style="width: 50%;" size="7">  
       <option ng-repeat="category in categories" value="{{category.category_id}}" ng-selected="{{selectedValues.indexOf(category.category_id.toString())!=-1}}"><b> {{category.category_name}} </b></option>  
     </select>

I found a libraries which is good implement for this case.

1. Angular-strap

How it works?

Js:
It use "<i class="fa fa-gear"></i>" as a icon and we can use html tag in value "<b> Gear</b>"

 var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);  
 app.controller('MainCtrl', function($scope) {  
 });  
 'use strict';  
 angular.module('mgcrea.ngStrapDocs')  
 .controller('SelectDemoCtrl', function($scope, $http) {  
  $scope.selectedIcon = '';  
  $scope.selectedIcons = ['Globe', 'Heart'];  
  $scope.icons = [  
   {value: 'Gear', label: '<i class="fa fa-gear"></i><b> Gear</b>'},  
   {value: 'Globe', label: '<i class="fa fa-globe"></i> Globe'},  
   {value: 'Heart', label: '<i class="fa fa-heart"></i> Heart'},  
   {value: 'Camera', label: '<i class="fa fa-camera"></i> Camera'}  
  ];  
  $scope.selectedMonth = 0;  
  $scope.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];  
 });

Html

 <!DOCTYPE html>  
 <html ng-app="mgcrea.ngStrapDocs">  
  <head>  
   <meta charset="utf-8" />  
   <title>AngularJS Plunker</title>  
   <script>document.write('<base href="' + document.location + '" />');</script>  
   <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">  
   <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">  
   <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">  
   <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">  
   <link rel="stylesheet" href="style.css" />  
   <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>  
   <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>  
   <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>  
   <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.5"></script>  
   <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.5"></script>  
   <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.5"></script>  
   <script src="app.js"></script>  
  </head>  
  <body ng-controller="MainCtrl">  
 <div class="bs-docs-section" ng-controller="SelectDemoCtrl">  
  <div class="bs-example" style="padding-bottom: 24px;" append-source>  
   <label>Single select:&nbsp;</label>  
   <button type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" bs-options="icon.value as icon.label for icon in icons" bs-select>  
    Action <span class="caret"></span>  
   </button>  
   <hr>  
   <label>Multiple select:&nbsp;</label>  
   <button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" data-multiple="1" data-animation="am-flip-x" bs-options="icon.value as icon.label for icon in icons" bs-select>  
    Action <span class="caret"></span>  
   </button>  
  </div>  
 </div>  
  </body>  
 </html>

DEMO

Library at http://mgcrea.github.io/angular-strap/##selects

2. Select2 templating with angularjs

Checkout it at https://select2.github.io/examples.html

Thanks for your time reading.
Hopw it helps