Search code examples
angularjsangularjs-material

md-slider not updating when its model value is updated from controller

My HTML code is following which contains md-slider

<body ng-app="ABC">

    <div class="ctrl" ng-controller="mainCtrl">

    <md-slider ng-model="threshold" md-discrete min="1" max="100" aria-label="threshold"></md-slider>

    </div>
</body>

This is my controller:

angular.module("ABC", ["ngMaterial"])
       .controller("mainCtrl", function ($scope) {

    $scope.threshold = localStorage.getItem("myExtThreshold");
});

When I slide the slider using mouse, threshold is updated in controller. However when I change threshold in controller, the slider position doesn't change. For example, if I change threshold value from 20 to 60, and I use console.log($scope.threshold) the value shown will be 60 but the md-slider remain at 20.

localStorage.getItem("myExtThreshold") returns valid numeric value.

Solution

  • Try this in the controller. Of course nothing wrong with your code. just making the return value to be a number 

    $scope.threshold = JSON.parse(localStorage.getItem("myExtThreshold"))