Bootstrap select

by Kai_Draord

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<select id="instructorLocationRadius" class="selectpicker btn-group-lg" style="border-radius: 0px; color: #777;">
  <option class="distance" value="2">2 miles</option>
  <option class="distance" value="5">5 miles</option>
  <option class="distance" value="8">8 miles</option>
  <option class="distance" value="15">15 miles</option>
  <option class="distance" value="25">25 miles</option>
</select>

CSS

.category {  
    margin-left:-12px;
    font-size: 1.3em; /*safari won't respect many/any of these but color?*/
    /*font-style: italic;*/
    font-weight: bold !important;
    color: #000000 !important; /*straight black makes it pop*/
    /*background: #000;*/
}

JavaScript

$('#instructorLocationRadius').on('changed.bs.select', function(event, clickedIndex, newValue, oldValue) {
  scope.locationDistanceSearched = newValue; // newValue is returning true
});