angularjs model doesnt get updated on select change -

i trying integrate angularjs , jquery chosen plugin, works fine when changed model doesnt updated can 1 tell me how go doing this, there video on youtube explains same dont have access youtube, highly appreciated

this html code:

<select id="categories" data-placeholder="select categories"      chosen="categories" ng-model="categoriesselected" multiple=""      ng-options="category.name category in categories"></select> <div ng-repeat="category in categoriesselected">{{category.name}}</div> 

this angular code:

app.directive('chosen', function() {     return {         restrict : 'a',         link : function(scope, element, attr)         {             console.log(attr);              $("#" + attr.id).chosen();              scope.$watch(attr.chosen, function(oldval, newval)             {                 $("#" + attr.id).trigger('chosen:updated');             });              scope.$watch(attr.ngmodel, function()             {                 $("#" + attr.id).trigger('chosen:updated');             });          }     }; })  app.controller("workbenchcontroller", function($scope, $http, workbenchservice) {     $scope.categories = [];     $scope.categoriesselected = [];     workbenchservice.categorieslist().then(function(data)     {         $scope.categories = data;     }) } 

the reason might jquery plugins make dom modifications after angular application has been compiled, means angular app not able use element part of app (no ng-model, ng-show, etc element), reason must try not use jquery plugins angular directives way directive compile along side app , youll working expected.

a better aproach problem use ui-select directive angular native select box works selectize, chosen or select2, more info , download here

and working plunker example here