javascript - Chosen.js doesn't work well with Angular directive -

i created plunker code question here http://plnkr.co/edit/mtarpoasqqq6oseqls3a?p=preview

this html code of list

<select ng-model="modselectedstate" id="inputlocation-" name="filter_location"          class="location" ng-options="state state.full_name state in states"       chosen="states"> <option value="">state</option> 

as can see created directive , named "chosen", here code:

app.directive('chosen', function ($http) { var linker = function (scope, element, attr) {     scope.$watch(scope.states, function (oldval, newval) {         element.trigger('liszt:updated');     });     scope.$watch(attr.ngmodel, function () {         element.trigger('liszt:updated');     });     element.chosen({disable_search_threshold: 20}); };  return {     restrict: 'a',     link: linker } }); 

please note using older version of 'chosen" requires 'liszt:updated' instead of 'chosen:updated'

i know states being populated since when inspect code, can see them in original select. ideas?

you have set $watch on directive name of variable on scope need monitor. happening watch running 'trigger' before list had elements.

i put $logs can check

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

scope.$watch('states', function (newval, oldval) {     element.trigger('liszt:updated');     $log.info('trigger');             });