AngularJS-Slider Issue Report

Fork this Fiddle to show an issue and report it here: https://github.com/rzajac/angularjs-slider/issues

by ValentinH

HTML

<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
    <div ng-controller="TestController as vm">
        <label>
          <input type="checkbox" ng-model="toggler" ng-change="toggleVertical()"/> toggle horz-vert
        </label>

        <p>Price: {{vm.priceSlider.value}}</p>
        <rzslider rz-slider-model="vm.priceSlider.value" rz-slider-options="vm.priceSlider.options"></rzslider>        
    </div>
</div>

CSS

.rz-vertical {
  min-height: 200px;
}

JavaScript

var myApp = angular.module('myapp', ['rzSlider']);

myApp.controller('TestController', TestController);

function TestController($scope) {
    var vm = this;

    vm.priceSlider = {
        value: 200,
        options: {
            floor: 0,
            ceil: 500
        }
    }
    
    $scope.toggleVertical = function() {
    	vm.priceSlider.options.vertical = !vm.priceSlider.options.vertical;
      $scope.$broadcast('rzSliderForceRender');
    };
}