how can i set the correct scope for ng-model in directive?

Question

I have a simple directive to automate sliders:

app.directive('slider', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element.slider({
                value: scope[attrs.ngModel],
                min: parseInt(attrs.min),
                max: parseInt(attrs.max),
                step: parseFloat(attrs.step),
                slide: function(event, ui) {
                    scope.$apply(function() {
                        scope[attrs.ngModel] = ui.value;
                    });
                }
            });
        }
    };
});

Simple scope set for different sliders:

$scope.sliders = [
    {type : 'red', value : 0},
    {type : 'green', value : 0},
]

HTML:

<div class="sliders" ng-repeat="slider in sliders">
    {{slider.value}}<slider min="1" max="10" step="1" ng-model="slider.value"></slider>
</div>

My problem is that my slider value isn't getting updated on slide...

DEMO: http://jsfiddle.net/ZXekc/641/

Slider Model isnt' updating

Answer 1

You can use the ngModelController to update the ng-model value

 var app = angular.module("app", []); app.controller("SomeController", function($scope) { $scope.sliders = [{ type: 'red', value: 0 }, { type: 'green', value: 0 }, ]; }); app.directive("slider", function() { return { restrict: 'E', require: 'ngModel', link: function(scope, elem, attrs, ctrl) { $(elem).slider({ range: false, min: parseInt(attrs['min']), max: parseInt(attrs['max']), step: parseFloat(attrs['step']), slide: function(event, ui) { scope.$apply(function() { ctrl.$setViewValue(ui.value) }); } }); ctrl.$render = function() { $(elem).slider("value", ctrl.$viewValue); }; } } }); 

  slider { width: 200px; margin: 10px; display: block; } 

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <div ng-app="app"> <div ng-controller="SomeController"> Price: {{price}} <div class="sliders" ng-repeat="slider in sliders"> {{slider.type}} = {{slider.value}} <slider min="1" max="10" step="1" ng-model="slider.value"></slider> </div> {{sliders | json}} <div> <input ng-repeat="slider in sliders" ng-model="slider.value" /> </div> </div> </div>