AngularJS - Using $filter for custom searches

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-$filter-production</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="filterExample">
    <div
        ng-controller="MainController as $ctrl"
        class="container-fluid p-3 mt-4"
    >
      <div class="d-flex mx-2 mb-3">
        <!-- <label for="searchField" class="pr-2 pt-2">Search field</label> -->
        <select
            class="custom-select mr-2"
            name="searchField"
            ng-model="$ctrl.searchField"
            ng-change="$ctrl.updateFilter()"
            ng-options="option.name for option in $ctrl.fields track by option.value"
        ></select>

        <div class="input-group">
          <input
              type="text"
              class="form-control"
              name="searchText"
              placeholder="Search text..."
              ng-model="$ctrl.searchText"
              ng-model-options="{ debounce: 200 }"
              ng-change="$ctrl.updateFilter()"
            />
          <span class="input-group-btn">
            <button
                class="btn btn-secondary"
                type="button"
                ng-disabled="$ctrl.searchText.length === 0"
                ng-click="$ctrl.clearSearchText()"
            >×</button>
          </span>
        </div>
      </div>

      <!--
      <div class="row mx-2 mt-3">
        <pre>{{$ctrl.searchField | json}}</pre>
      </div>
      -->

      <div class="row mx-2 mt-3">
        <h6>Showing {{$ctrl.filteredUsers.length}} of {{$ctrl.users.length}} users.</h6>
      </div>
        
      <div class="card-deck mb-3">
        <div ng-repeat="user in $ctrl.filteredUsers" class="w-50 p-2">
          <div class="card">
            <h6 class="card-header bg-primary text-white">
              {{user.firstName}} {{user.lastName}}
            </h6>
            <div class="card-block">
              <div class="card-text">
                {{user.greeting}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

(function(angular) {
  'use strict'
  
  class MainController {
    constructor($filter) {
      this.$filter = $filter
    }
    
    $onInit() {
      this.filter = this.$filter('filter')
      
      this.users = [
        {
          firstName: 'Bob',
          lastName: 'Abooey',
          greeting: 'hello'
        },
        {
          firstName: 'James',
          lastName: 'Skinner',
          greeting: 'Y HELO THAR!'
        }
      ]
      
      this.fields = [
        { value: '$', name: 'All fields' },
        { value: 'firstName', name: 'First name' },
        { value: 'lastName', name: 'Last name' },
        { value: 'greeting', name: 'Greeting' }
      ]
      
      this.searchField = this.fields[0]

      this.clearFilter()      
    }
    
    clearFilter() {
      this.searchText = ''
      this.updateFilter()
    }
    
    updateFilter() {
      const query = {
        [this.searchField.value]: this.searchText
      }
      
      this.filteredUsers = this.filter(this.users, query)
    }
  }
  
  angular
    .module('filterExample', [])
    .controller('MainController', MainController)
    /*
    .controller('MainCtrl', function($scope, $filter) {
      $scope.users = [
        {
          firstName: 'Bob',
          lastName: 'Abooey',
          greeting: 'hello'
        },
        {
          firstName: 'James',
          lastName: 'Skinner',
          greeting: 'Y HELO THAR!'
        }
      ]
      
      const filter = $filter('filter')
      
      $scope.searchTextChanged = () => {
        $scope.filteredUsers = filter($scope.users, { $: $scope.searchText })
      }
      
      $scope.clearSearchText = () => {
        $scope.searchText = ''
        $scope.searchTextChanged()
      }
      
      $scope.clearSearchText()
    })
    */
})(window.angular)

/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/