Angularjs - ng-model not getting updated from javascript

Question

I have a jQuery based slider that updates an input box. The angular handle for the input box's content is not getting updated when slider moves though the value is updated (as shown in image)

Code:

<form ng-app="myApp" ng-controller="myController" ng-submit="readData()" >
    <input type="text" id="amount" value="3-7" ng-model="duration" ng-init="duration='3-7'" >
    <button type="submit" value="Submit">Submit</button>
</form>

<div id="slider-range">
    <script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 15,
                values: [ 3, 7 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            });
        });
    </script>
</div>

<script type="text/javascript" >
    var app = angular.module('myApp', []);

    app.controller('myController',  function ($scope, $http, $templateCache, $interval, $timeout) {
        $scope.readData = function () {                
            alert($scope.duration); // always show the init value i.e. 3-7
        };
    });
</script>

Picture View

Edit 1: To investigate further, I am posting the whole code.

<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script type="text/javascript" src="js/angular.js"></script>
    <title></title>

</head>
<body >

<form ng-app="myApp" ng-controller="myController" ng-submit="readData()" >
    <input type="text" id="amount" value="3-7" ng-model="duration" ng-init="duration='3-7'" >
    <button type="submit" value="Submit">Submit</button>
</form>

<div id="slider-range">
    <script>

    </script>
</div>

<script type="text/javascript" >
    var app = angular.module('myApp', []);

    app.controller('myController',  function ($scope, $http, $templateCache, $interval, $timeout) {
        $scope.readData = function () {
            alert($scope.duration);
        };
    });

    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 15,
            values: [ 3, 7 ],
            slide: function( event, ui ) {
                $( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );
            }
        });
    });
</script>
</body>

msapkal · Accepted Answer · 2014-12-11T14:16:34.060

You would need to call a digest cycle manually using $apply.

Actually, AngularJS makes one thing pretty clear. It will account for only those model changes which are done inside AngularJS’ context (i.e. the code that changes models is wrapped inside $apply()). Angular’s built-in directives already do this so that any model changes you make are reflected in the view. However, if you change any model outside of the Angular context, then you need to inform Angular of the changes by calling $apply() manually. It’s like telling Angular that you are changing some models and it should fire the watchers so that your changes propagate properly.

slide: function(event, ui) {
  $('[ng-controller="myController"]').scope().$apply(function() {
    $('[ng-controller="myController"]').scope().duration = ui.values[0] + " - " + ui.values[1];
  });
}

PLUNKR

I added this $apply snippet. It is not working, along with it a strange behavior emerges in the slider component. The slider movement are not reflected when I drag the handles, though the value in the #amount changes. — Mohitt, Dec 11 '14 at 08:37

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

All you need to do is call $scope.$apply() in slide callback, to do it, you need to get access to controller scope. How to do it, described here: AngularJS access scope from outside js function

Main point is that when you change data from outside of angular world, you need to manually "tell" angular to update the values.

edited May 23 '17 at 12:27

Community

1
1

answered Dec 11 '14 at 08:01

Rasalom

3,101
3
21
29

I added this $apply snippet. It is not working, along with it a strange behavior emerges in the slider component. The slider movement are not reflected when I drag the handles, though the value in the #amount changes – Mohitt Dec 11 '14 at 08:38

Angularjs - ng-model not getting updated from javascript

2 Answers2