title: How do I $watch the Angular-ui's new ui-select (former ui-select2) search string changes?
body: <p>I noticed that the Angular-UI have discontinued their UI-Select2 directive in favor of the new UI-Select (with multiple themes - select2, bootstrap, selectize).</p>
  
  <p>It looks like this:</p>
  
  <pre><code>&lt;ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;"&gt;
      &lt;ui-select-match placeholder="Select colors..."&gt;{{$item}}&lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="color in availableColors | filter:$select.search"&gt;
          {{color}}
      &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  
  &lt;p&gt;Selected: {{multipleDemo.colors}}&lt;/p&gt;
  </code></pre>
  
  <p>Initially my selectbox is supposed to be empty but ready to take typed characters, that is a string of at least 4 characters and then make an API call to retrieve a list of suggested values which are to populate the box. One value will then be chosen, and searching should be repeated as needed.</p>
  
  <p>First I tried <code>$watch</code>ing the <code>ng-model</code> which in this case is <code>multipleDemo.colors</code> (using this example from the demos). The API call never occurred and then I realized why. The actual model is not changed at all because it only changes when a selection is made (my selectbox is empty so nothing can be selected).</p>
  
  <p>My conclusion is that I should (be able to) <code>$watch</code> what's been added as filter, namely <code>filter: $select.search</code>.</p>
  
  <p>Does anyone know how am I supposed to use that one in my controller?</p>
  
  <p>This:</p>
  
  <pre><code>$scope.$watch('$select.search', function(newVal){
      alert(newVal);
  });
  </code></pre>
  
  <p>doesn't work.</p>
  
  <p>EDIT:
  For anyone's reference, see this short discussion: <a href="https://github.com/angular-ui/ui-select/issues/30">Is it possible to add support for custom query function like the select2?</a></p>
  
  <p>EDIT 2:</p>
  
  <p>I solved this by using <code>$emit</code> from within the directive so the value is available in my controller now. But now I'd like to know how can I override this part of the directive so the directive itself can be left intact so it doesn't break in future updates?</p>