title: Chosen.js doesn't work well with Angular directive
body: <p>I created a plunker code for this question here <a href="http://plnkr.co/edit/mTaRPoAsQQQ6OSEQLS3a?p=preview" rel="nofollow">http://plnkr.co/edit/mTaRPoAsQQQ6OSEQLS3a?p=preview</a></p>
  
  <p>This is the HTML code of the list</p>
  
  <pre><code>&lt;select ng-model="modSelectedState" id="inputLocation-" name="filter_location"    
       class="location" ng-options="state as state.full_name for state in states" 
       chosen="states"&gt;
  &lt;option value=""&gt;State&lt;/option&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see i created a directive and named it "chosen", here is the code:</p>
  
  <pre><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
  }
  });
  </code></pre>
  
  <p>Please note that I am using the older version of 'chosen" which requires 'liszt:updated' instead of 'chosen:updated'</p>
  
  <p>I know that the states are being populated since when I inspect the code, I can see them in the original SELECT. Any ideas?</p>