JSFiddle - React, Tailwind, and code Playground

by yufeng

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<div ng-controller="mainController">
	<select ng-model="nationality" id="nationality" ng-options="player.name for player in players | unique: 'nationality'">
		<option value="">Please Select</option>
	</select>
</div>

JavaScript

angular.module('myApp', ['ui.filters'])
	.controller('mainController', ['$scope', 
		function ($scope) {
			$scope.players = [{
				name: 'test user 1',
				nationality: 'Spanish'
			},{
				name: 'test test 2',
				nationality: 'Spanish'
			},{
				name: 'test user 3',
				nationality: 'German'
			}];
	}
]);

/**
 * This module is from this link: https://raw.githubusercontent.com/angular-ui/angular-ui-OLDREPO/master/modules/filters/unique/unique.js
 * Filters out all duplicate items from an array by checking the specified key
 * @param [key] {string} the name of the attribute of each object to compare for uniqueness
 if the key is empty, the entire object will be compared
 if the key === false then no filtering will be performed
 * @return {array}
 */
angular.module('ui.filters', []).filter('unique', function () {

  return function (items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

      var extractValueToCompare = function (item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };

      angular.forEach(items, function (item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});

angular.element(document).ready(function() {
	angular.bootstrap(document, ['myApp']);
});