客製化 ng-options

改用 ng-repeat
例如依據顯示文字設定class

<style>
option[data-text*="未完成"] {
  color: red;
}
</style>
<select ng-model="countrySelected">
  <option ng-repeat="country in countries" value="{{country.CountryCode}}"         
          data-text="{{country.CurrencyName}}">{{country.CurrencyName}}</option>
</select>

使用 bootstrap toggle 搭配 ng-model

javascript
====
.directive("togglebox", function () {
        return {
             scope: {

                togglebox: "=" // 設定 屬性值 綁定 ng-model

            },

            link: function (scope, element,ngModel) {
                element.on('change', function() {
                    var checked = element.prop('checked');
                    scope.$apply(function () {

                        scope.togglebox = checked; // 對應 $scope.switch

                    });

                });              
            }
        }
    })

html
====
<input togglebox="switch" type="checkbox" checked data-toggle="toggle" data-on="全部" data-off="營收" data-onstyle="success" data-offstyle="info">

css (指定寬度，文字置中)

====

 .toggle.btn {

    width:80px !important;

    min-height:28px;

}

.toggle-off.btn,  .toggle-on.btn{

     padding-left: 5px; padding-right: 5px; 

}

bootstrap toggle