javascript - Custom event bind not running $digest correctly -

i have fiddle easy example - http://jsfiddle.net/e7crq/4/

var app = angular.module('myapp', []);  app.controller('testcontroller', function($scope) {         $scope.selectoption = 1; });  app.directive('selectableoption', function () {     return {          restrict: 'a',          link: function (scope, element, attributes) {              $(element[0]).on('mychange', function() {                  scope.$digest();                               });                           $(element[0]).on('change', function() {                  scope.$digest();              });          }     }; });  $('button').on('click', function() {     $('#mainselect option[value=' + $(this).attr('data-value') + ']').attr('selected', 'selected');     $('#mainselect').trigger('change'); }); 

html

<div ng-app="myapp">     <div ng-controller="testcontroller">         <select ng-model="selectoption" id="mainselect" selectable-option>             <option value="1">1</option>                 <option value="2">2</option>                 <option value="3">3</option>             </select>         <div>           option: {{ selectoption }}         <div>             <button data-value="1" id="btn1">1</button>             <button data-value="2" id="btn2">2</button>             <button data-value="3" id="btn3">3</button>     </div> </div> 

the way written, if click on of 1, 2, 3 buttons, updates scope , selected value. if change event triggered last line of code 'change' 'mychange', doesn't work anymore.

i guess that's because angular has handler change event. need make mychange event work?

i don't agree line of solution @ all, involving both jquery outside of angular in order angular things.

first of - can wanted in $scope of controller. second - can solve inside directive - please use angular syntax if going coding in angular.

i've changed jsfiddle in http://jsfiddle.net/m3ddk/1/ can see how rid of jquery . (it's evil ;-)

2 things note - controller should this:

$scope.setselected = function (e) {     e.preventdefault();     e.stoppropagation();     var valuenum = e.target.id.substr('btn'.length);     $scope.selectoption = valuenum;     $scope.$broadcast('mychange', valuenum); }; 

and html code this:

        <div>             <button ng-click="setselected($event)" id="btn1">1</button>             <button ng-click="setselected($event)" id="btn2">2</button>             <button ng-click="setselected($event)" id="btn3">3</button>         </div> 

this can further cleaned (if use ng-repeat) left handle.

then in directive, i've made optional listener onchange event:

app.directive('selectableoption', function () { return {     restrict: 'a',     link: function (scope, element, attributes) {         scope.$on('mychange', function (event, valuenum) {             //angular.element(element.children()[valuenum]).attr('selected', 'selected');         });     } }; 

});

in conclusion - check out fiddle, , rid of jquery. don't need it, angular more powerful that. plus big tip - element inside directive link jquery element.