Angular-bootstrap-slider default / two-way binding

Question

Using angular-bootstrap-slider based on bootstrap-slider . This extends the previous question regarding getting the value as a string.

I want to set the value shown when the page loads to be any other value than the first.

Say I want to show "blue" and not "red"

How to set a value to be returned from another area of ​​$.

Or maybe how to set the default slider value?

I have a working Plunker example and the code below

script:

  $scope.colors = [{'id': 0,'label': 'red'},{'id': 1,'label': 'blue'},{'id': 2,'label': 'green'}];

  function getAttrs(collection, attr) {
    var attrArray = [];
    angular.forEach(collection, function(item) {
      attrArray.push(item[attr]);
    }) 
    return attrArray;
  }

$scope.colorTypeSlider = {
    ticks: getAttrs($scope.colors, 'id'), // [0,1,3]
    ticks_labels: getAttrs($scope.colors, 'label'), // ['red', 'blue','green']
    ticks_snap_bounds: 50,
};

$scope.selectedColor = '';

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

HTML:

 <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>
                <h6> value check is: {{selectedColor}} </h6>

Answer 1

, Slider Bootstrap (bootstrap-slider.js) "" . . . angular -bootstrap-slider (slider.js), , : "ngModel" "value". initSlider() ngModel , . , "ngModel" "value", .

<span slider range="true" 
      precision="0" 
      scale="'logarithmic'" 
      ng-model="ngModel" 
      value="ngModel" 
      min="minValue" 
      step="1000" 
      max="maxValue"
      on-stop-slide="setValue()" 
      slider-tooltip="hide">
</span>

, ( , ), , ngModel ng-model ( ), ( ). ng-model angular -bootstrap-slider, , , , .