Angular: Grab value from input field that's dynamically binded with jquery

Question

I have this input field in my form

<input type="number" style="display:none" ng-model="frequency" id="frequencyDisplay">
            </div>

The value of this input field is changed when I change a slider, given by this jquery

    $(".dial").knob({
        'min':1,
        'max':180,
        change: function(value){
            $("#frequencyDisplay").val(Math.round(value));
            console.log(value);
        }
    });

However, I can't access the ng-model frequency as it seems to be blank.

In my controller,

$scope.frequency is a null value. It's got nothing attached to it. I've most definitely checked using the console that #frequencyDisplay has a value. Just ng-model is unable to access it. Any ideas how to?

If you haven't yet encountered in pretty much any article about intro to Angular, I'll say it here: mixing Angular with jQuery is a bad idea; you really need to know what you are doing, and even so, restrict it to directives. — New Dev, Dec 21 '14 at 23:20
Didn't feel comfortable enough with directives, but I'll probably practice more with them, thanks! — user3340037, Dec 21 '14 at 23:21
Read this [SO answer](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) - it will help you to think in Angular way — New Dev, Dec 21 '14 at 23:23

score 0 · Answer 1 · answered Dec 21 '14 at 23:20

The scope probably needs to be updated - using $scope.apply() will make angular look for any changes inside your controller/directive.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest

score 0 · Accepted Answer · answered Mar 30 '16 at 02:28

Something like this should do the trick (:

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $timeout) {
    $scope.frequency = 0;    
    $scope.setFrequency = function(value) {
      $timeout(function(){ 
        $scope.frequency = value;
      });
    }
  });


$(function() {
  $("#target").on("change paste keyup", function() {
    var value = Math.round($(this).val());
    var e = document.getElementById('frequencyDisplay'); 
    var $timeout = angular.element(e).injector(['ng']).get('$timeout');    
    var scope = angular.element(e).scope();
    scope.setFrequency(value);    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <input type="number" id="target" />
  <input type="number" ng-model="frequency" id="frequencyDisplay" />
</body>

Angular: Grab value from input field that's dynamically binded with jquery

2 Answers2