Using $scope.$apply() outside of the AngularJS world

Question

I have created jQuery widget that basically adds more functionality and CSS stylings to the native jQuery UI Datepicker. I use the onSelect option for the datepicker to update the <input> accordingly. The problem is that even though the input changes, the model on the $scope does not change. I know I need to use $scope.$apply() in some way to notify angular that the input has changed.

I tried the following but it did not work.

this.options.onSelect = function (dateText, inst) {


                $el.val(dateText);
                that.$scope.$apply(); // This isn't working. I think I need to do something else
                that.wrap.hide();


                jQuery(document).find('.iconalt').hide();


                if (that.options.afterSelect !== undefined) {
                    that.options.afterSelect();
                }
            }

This has got to be a very common problem... correct? How does no one know? Am I doing it wrong? — Matt Hintzke, Aug 28 '14 at 18:35
If you set value using `$el.val(dateText);` your ngModel does not change and you dont even need `that.$scope.$apply();` in this case. I guess you need to update the model and then do scope.apply() — PSL, Aug 28 '14 at 18:37
if you really need to modify the DOM, create a custom angular directive. also: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — mb21, Aug 28 '14 at 18:39
I am using an Angular Directive called my-datepicker.. that is where I bind the element to the datepicker — Matt Hintzke, Aug 28 '14 at 18:41

score 0 · Answer 1 · answered Aug 28 '14 at 18:44

I was able to find the solution. I needed to update the model before calling $apply()

this.options.onSelect = function (dateText, inst) {


                $el.val(dateText);
                that.$scope.date = dateText; // Adding this worked
                that.$scope.$apply(); 
                that.wrap.hide();


                jQuery(document).find('.iconalt').hide();


                if (that.options.afterSelect !== undefined) {
                    that.options.afterSelect();
                }
            }

Using $scope.$apply() outside of the AngularJS world

1 Answers1