Slider position not set on load

Using angular-fullstack I am setting a slider with the scope value like so:

$scope.sliderValue = 100;

and the markup:

        <rzslider rz-slider-model="sliderValue"
            rz-slider-floor="2"
            rz-slider-hide-limit-labels = "false"
            rz-slider-ceil="100"
            rz-slider-always-show-bar="true"></rzslider>

I am displaying the value of the slider on the page and it is correctly set to 100, but the slider position is stuck at 0 until i click on it, then it jumps up to where it’s supposed to be.

[maknapp]

For the ng-show and tab problems, I have looked into this further and have a solution that gets rid of any flickering. In angularjs v1.2, the slider did not require a timeout and could be force rendered immediately. This is the breaking commit that defers ng-show until the end of the digest cycle.

So, running force render in post digest instead of JavaScript’s next execution cycle (setTimeout) will get rid of any flickering (jsfiddle):

$scope.$$postDigest(function () {
    $scope.$broadcast('rzSliderForceRender');
});

Also, if you want to continue using $setTimeout you should at least stop it from running digest again, since rzSliderForceRender does not require another digest:

$timeout(function () {
    $scope.$broadcast('rzSliderForceRender');
}, 0, false);

[Dreamerpro]

I got over this issue by increasing timeout delay to above 170ms. $timeout(function () { $scope.$broadcast('rzSliderForceRender'); },170); I think this is the rendering time taken in my case.