How to update controller variable from jquery?

Question

I have a date picker widget, and I want to pass the picked date to the controller. I have this script snippet in my view:

        <div id="datepicker"></div>
        <script type="text/javascript">
        $('#datepicker').datepicker();
        $('#datepicker').datepicker()
        .on('changeDate', function(ev){

          alert(ev.date);
        });
        </script>

How to send this "ev.date" to the controller?

I want it to affect controller variable so this change is then picked up by a directive and dom is modified in the directive.

Answer 1

You can do something like this:

$('#datepicker').datepicker()
  .on('changeDate', function(ev){
     //get a hold of controller and scope
     var element = angular.element($('#datepicker'));
     var controller = element.controller();
     var scope = element.scope();

     //as this happends outside of angular you probably have to notify angular of the change by wrapping your function call in $apply
     scope.$apply(function(){
       scope.updateDateFunction(ev.date);
     });
 });

See: http://docs.angularjs.org/api/angular.element