Selected Angular directive not updated

Question

I followed this wonderful tutorial ( link ) for Chosen and Angular (the code is pretty much the same)

Here is my directive:

app.angularModule.directive('chosen', function() { var linker = function (scope, element, attrs) { var list = attrs['chosen']; scope.$watch(list, function () { element.trigger('chosen:updated'); }); element.chosen({ width: '350px'}); }; return { restrict: 'A', link: linker }; }); 

Here is the html:

 <select data-placeholder="Choose a Category" multiple class="col-lg-8 chosen-select" chosen="items" ng-options="item._backingStore.Name for item in items" ng-model="selectedCategories" > </select> 

What I want, when the user clicks the edit button, a modal window appears, and the categories that are selected before clicking the edit button are selected in the modal window.

Here is this part of the controller:

  $scope.$watch(function() { return adminCrudService.getCategoriesForUpdate(); }, function() { $scope.action = "edit"; $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate(); if ($scope.categoriesForUpdate.length > null) { $scope.selectedCategories = _.filter($scope.items, function (item) { return _.contains($scope.categoriesForUpdate, item); }); } }); 

I registered $ scope.selectedCategories, and everything is fine with them, but for some reason nothing was selected in the selected one.

So what am I doing wrong and how can I fix this?

EDIT

I noticed when I select some elements, close the modal, open them again, the selected values ​​appear again, although I put this line inside $ watch

 $scope.selectedCategories = ""; 

EDIT 2

So, I left this problem for a while, because I had a more important case. I tried without a choice, i.e. Using the "normal" selection and operation of the code. So, finally, my chosen directive does not work as it should.

Answer 1

I solved this, the solution is quite simple and straightforward (when you learn how Angular directives work). Here is the complete code for the directive:

 app.angularModule.directive('chosen', function() { var linker = function (scope, element, attrs) { var list = attrs['chosen']; scope.$watch(list, function () { element.trigger('chosen:updated'); }); scope.$watch(attrs['ngModel'], function() { element.trigger('chosen:updated'); }); element.chosen({ width: '350px'}); }; return { restrict: 'A', link: linker }; }); 

Answer 2

A more extended version of the comment to the previous solution. The same as the author, in the HTML markup, I provide the source set, for example, chosen="vm.myCollection" , actually parsing ng-options or ng-repeat properties with a regular expression is better, maybe later. Unlike the OP, I use $ watchCollection for an array and call bezos when the scope is about to be destroyed.

 (function () { 'use strict'; angular.module('common.directives').directive('chosen', enterPressDirective); function enterPressDirective() { return { restrict: 'A', link: function (scope, elm, attrs) { var unwatchModel = scope.$watch(attrs.ngModel, function () { elm.trigger('chosen:updated'); }); var unwatchSource = scope.$watchCollection(attrs.chosen, function () { elm.trigger('chosen:updated'); }); elm.chosen(); scope.$on('$destroy', function () { unwatchModel(); unwatchSource(); }); } }; } }());