angularjs: $scope update when I change a select with jQuery

Question

I'm using a jQuery plugin to 'customize' my selects.

This plugin fires the change event of the original select when some option is selected.

The problem is that my scope doesn't change.

Here you can see a quick example... changing the select the scope changes. clicking the buttons the select changes but not the scope.

http://plnkr.co/edit/pYzqeL6jrQdTNkqwF1HG?p=preview

What am I missing?

Answer 1

You need to access the scope of the dropdown and then apply it as shown below:

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

Answer 2

In your jQuery put auto trigger e.g

 $('#input').click(function(){
      $('#input').val('1');
      $('#input').trigger('input'); //add this line this will bind $scope Variable
    });