title: AngularJS directive for jQuery chosen plugin not working for asynchronously loaded data
body: <p>I am trying to set up a directive in my AngularJS app for the <a href="http://harvesthq.github.io/chosen/" rel="nofollow">jQuery chosen plugin</a>, however, the plugin is not updating to show the list of items I load in using AJAX / $http.</p>
  
  <p>A demo of my problem can be <a href="http://plnkr.co/edit/dAl5axBvK2N3WDgALZfB?p=preview" rel="nofollow">seen on plunker</a>.</p>
  
  <p>Here is the relevant code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select
      style="width: 100%;"
      ng-chosen
      multiple
      ng-model="selectedItem"
      ng-options="item.name for item in items"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module('myApp', [])
  
  .controller('myController', function($scope, $http) {
  
    $scope.selectedItems = {};
    $scope.items = undefined;
  
    $http.get('items.json').then(function(response) {
      $scope.items = response.data;
    }, function() {
      // Error ...
    });
  })
  
  .directive("ngChosen", function() {
      return {
          require: 'ngModel',
          restrict: 'A',
          link: function(scope, elem, attrs, ngModel) {
  
              scope.$watch(attrs.ngModel, function(newValue) {
                  // Trigger chosen update
                  $(elem).trigger("chosen:updated");
              });
  
              // Init chosen
              $(elem).chosen();
          }
      };
  });
  </code></pre>
  
  <p>How can I get this working so the <code>chosen</code> element shows my list of <code>items</code>?</p>