Filtering by Multiple Specific Model Properties in AngularJS

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@*" 
          data-semver="4.0.0-alpha.4" 
          rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="style.css" />
    <script data-require="angular.js@*" 
            data-semver="2.0.0-alpha.31" 
            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Card Check</h2>
    <div ng-controller="mC">
      <form>
        <h3>Select a Filter</h3>
        <select 
          ng-model="cardSelected"
          ng-options="cardTypes.indexOf(cardSelected) as cardSelected for cardSelected in cardTypes">
        </select>
        
        <hr />
        
        <h3>Type:  {{cardType[cardSelected]}}</h3>
        <select>
          <option ng-repeat="card in deck.Cards | filter: {Type: cardTypes[cardSelected]}">{{card.Name}}</option>
        </select>
      
        <h4>inside the select...</h4>
        <ul class="unstyled">
          <li ng-repeat="c in deck.Cards | filter: {Type: cardTypes[cardSelected]}">
            <input type="checkbox" ng-model="c.done">
            <span class="done-{{c.done}}">{{c.Name}}</span>
          </li>
        </ul>
        
        <hr />
      
        <h3>Select a Filter</h3>
        <input type="textbox" ng-model="cardSearch">
        <h4>using a textbox filter</h4>
        <ul class="unstyled">
          <li ng-repeat="c in deck.Cards | filter: {Type: cardTypes[cardSelected], Name: cardSearch}">
            <input type="checkbox" ng-model="c.done">
            <span class="done-{{c.done}}">{{c.Name}}</span>
          </li>
        </ul>
        
        <hr />
        
        <h4>Results:</h4>
        <ul class="unstyled">
          <li ng-repeat="c in deck.Cards">
            <span class="done-{{c.done}}">{{c.Name}} - <i>{{c.Type}}</i></span>
          </li>
        </ul>
      </form>
    </div>
  </body>

</html>

'use strict';
var pcmsApp = angular.module("myApp", []);

pcmsApp.controller('mC', 
  ['$scope',
  function($scope) {
    var cardTypes = [
      'Face',
      'Numeral',
      'Wild'
    ];
    
    var card = function(name, type, isWild = undefined) {
  	  var _name = name;
      var _type = type;
      return {
        Name: _name,
        Type: isWild ? type + ', ' + isWild : type
      };
    };
  
    var deck = function() {
      var _cards = [
        new card('2', 'Numeral', 'Wild'),
        new card('3', 'Numeral'),
        new card('4', 'Numeral'),
        new card('5', 'Numeral'),
        new card('6', 'Numeral'),
        new card('7', 'Numeral, Lucky'),
        new card('8', 'Numeral'),
        new card('9', 'Numeral'),
        new card('10', 'Numeral'),
        new card('Jack', 'Face'),
        new card('Queen', 'Face'),
        new card('King', 'Face'),
        new card('Ace', 'Face', 'Wild')
      ];
      return {
        Cards: _cards
      };
    };
  
    $scope.deck = deck();
    $scope.cardTypes = cardTypes;
    $scope.cardSelected = null;
  }
]);

.done-true {
  text-decoration: line-through;
  color: grey;
}

.done-true i {
  color: #C00;
}