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

angularjs, angularjs-scope

Solution

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;
    });
});

Problem

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?

Original source