title: angular-bootstrap-slider default value / two-way binding
body: <p>Using <a href="https://github.com/seiyria/angular-bootstrap-slider" rel="nofollow noreferrer">angular-bootstrap-slider</a> based on <a href="https://github.com/seiyria/bootstrap-slider" rel="nofollow noreferrer">bootstrap-slider</a>.
  This extends a previous question regarding <a href="https://stackoverflow.com/questions/34771897/angular-bootstrap-slider-get-value-as-string">get value as string</a></p>
  
  <p>I want to set the shown value when the page is loaded to be any other value than the first one.</p>
  
  <p>Let's say I want 'blue' to be shown and not 'red' </p>
  
  <p>How do I set a value that will be returned from another $scope.</p>
  
  <p>Or perhaps how do I set the default value of the slider?</p>
  
  <p>I have a working <a href="http://plnkr.co/edit/KhfPI2Df0MbQWfGjTJwP" rel="nofollow noreferrer">Plunker example</a> and code below</p>
  
  <p>script:</p>
  
  <pre><code>  $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];
  };
  </code></pre>
  
  <p>html:</p>
  
  <pre><code> &lt;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)"&gt;&lt;/slider&gt;
                  &lt;h6&gt; value check is: {{selectedColor}} &lt;/h6&gt;
  </code></pre>