title: How to define custom filter for ui-select module in AngularJS?
body: <p>Here is the code from select-field in html:</p>
  
  <pre><code>&lt;ui-select ng-model="group.selected" theme="selectize" ng-click="searchDisabled(3)" ng-disabled="disabledGroup"&gt;
     &lt;ui-select-match placeholder="Choose a group"&gt;
         {{$select.selected.name}}
     &lt;/ui-select-match&gt;
     &lt;ui-select-choices repeat="group in groups | filter: $select.search"&gt;
        &lt;span ng-bind-html="group.name | highlight: $select.search"&gt;&lt;/span&gt;
        &lt;small ng-bind-html="group.code | highlight: $select.search"&gt;&lt;/small&gt;
     &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  </code></pre>
  
  <p>Then the field who's important to filter the table list:</p>
  
  <pre><code>&lt;tr ng-repeat="item in filteredNames = (nameslist | filter:search | selectGroup:group.selected)"&gt;
     &lt;td&gt;{{ item.lname }}&lt;/td&gt;
     &lt;td&gt;{{ item.fname }}&lt;/td&gt;
     &lt;td&gt;{{ item.maxAge }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I'm using the ngModel value from ui-select-tag in the custom filter selectGroup as parameter for the filter.</p>
  
  <p>The nameslist values are coming from the database. Here the JSON result of a GET Request by QR_Group DB-Table:</p>
  
  <pre><code>{
    "QR_Name":[
      { "Id":31, "lname":"Bricks", "fname":"Johnny", "maxAge":24, "QR_GroupId":6 },
      { "Id":4, "lname":"Schon", "fname":"Toni", "maxAge":54, "QR_GroupId":6 },
      { "Id":56, "lname":"Houston", "fname":"Monica", "maxAge":29, "QR_GroupId":6 },
     ],
    "Id":6,
    "name":"South America",
    "code":"SA"
  }
  </code></pre>
  
  <p>This JSON format I'm getting from the WebAPI method GetGroup. How can I display the QR_Name array on the table list with the custom filter?</p>
  
  <p>This was my first thought:</p>
  
  <pre><code>testApp.filter('selectGroup', ['$log', function ($log) {
      return function (nameslist, group) {
          group = group || '';
          $log.info('fondslist:', fondslist);
          $log.info('Filter for group:', group);
          var selectList = [];
  
          angular.forEach(fondslist, function (input) {
              if (group == input.QR_Name['QR_GroupId']) {
                  selectList.push(input);
              }
          });
      }
  }]);
  </code></pre>
  
  <p>But the filter doesn't work correctly.</p>