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 i

Answer 1

When you click the button, angular goes out of its scope and uses jquery to manipulate the data/to perform some action, so we need to exlicitly call $scope.$apply() to reflect the changes back into the scope of the controller. And change your controller to this:

app.controller('AppCtrl', function($scope) {
    $('button').on('click', function(){
        $scope.selectValue=$(this).data('val');
        $scope.$apply();
    });
}

By the way you can use jquery event inside the angular..

Answer 2

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 3

It's best not to mix DOM manipulation with Angular. Try the following for your button HTML:

<button class="setVal" ng-click="selectValue=1">Set 1</button>
<button class="setVal" ng-click="selectValue=2">Set 2</button>
<button class="setVal" ng-click="selectValue=3">Set 3</button>

I tried the above in your Plunker and it worked.

Answer 4

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

Answer 5

Ideally in angularJS, controller should not update DOM reference directly. If you want to achieve same thing, you should expose one method over $scope and use "ng-click" directive.

If you want to achieve same using jQuery, it should go into directive as

$scope.$apply()

to update the scope.