Angular-bootstrap-slider gets the value as a string

Question

Using angular-bootstrap-slider based on bootstrap-slider .

I am trying to get the color value by name (string) based on my work on previous questions, such as Here , where there is a good example of the options available.

Let's say I have two color options: red and blue, the user selects one, I want to save it as “blue”.

I created a working example in Plunker and added the code below

All I can get is the checkmark value if I use a numerical object.

Script:

$scope.colorTypes = [0,1];

$scope.colorLabels = ['Red','Blue'];

$scope.colorTypeSlider = {
    ticks: $scope.colorTypes,
    ticks_labels: $scope.colorLabels,
    ticks_snap_bounds: 50
};
$scope.colorTypeVal = '';

HTML:

 <slider ng-model="colorTypeVal" ticks="colorTypeSlider.ticks"
                        ticks-labels="colorTypeSlider.ticks_labels"
                        ticks-snap-bounds="colorTypeSlider.ticks_snap_bounds"></slider>
                <h6> value check is: {{colorTypeVal}} </h6>

Answer 1

, , - . , onStartSlide , , .

<slider ng-model="colors" 
        ticks="colorTypeSlider.ticks"
        ticks-labels="colorTypeSlider.ticks_labels"
        ticks-snap-bounds="colorTypeSlider.ticks_snap_bounds" 
        on-start-slide="selectColor($event,value,colorTypeSlider.ticks_labels)"></slider>

$scope.colors () - , . , , :

$scope.selectColor = function ($event,value,collection) {
  console.log('value is ' + value);
  $scope.selectedColor = collection[value];
};

$scope.colorTypeSlider.ticks_labels .

, ...