AngularJS Example:

by Michele Marcucci

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://underscorejs.org/underscore-min.js"></script>
<div ng-app="demo" ng-controller="MainController">

    <h1>Country list filter!</h1>

    <ul search-list=".letter" model="search">
        <li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
    </ul>

    <div class="container">

        <input id="q" type="text" ng-model="search " />
        <ul>
            <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
        </ul>

    </div>
</div>

CSS

/* Styles go here */

.letter {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  margin-bottom: 5px;
  border: solid 1px blue;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

JavaScript

// Code goes here

var app = angular.module('demo', []);
var controllers = {};
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
var countriesNotSorted = ['Ukraine', 'Urugvai', 'Russia', 'Romania', 'Belgium', 'Algeria', 'Rome', 'Argentina', 'Britain', 'Indonesia', 'Germany', 'Brazil', 'Portugal', 'Polska', 'Uganda', 'Bolivia', 'Andorra'],
  countriesArray = countriesNotSorted.sort();



app.directive('searchList', function() {
  return {
    scope: {
      searchModel: '=model'
    },
    link: function(scope, element, attrs) {
      element.on('click', attrs.searchList, function() {
        scope.searchModel = $(this).text();
        scope.$apply();
      });
    }
  };
});

controllers.MainController = function($scope) {
  $scope.setTerm = function(letter) {
    $scope.search = letter;
  };
  $scope.alphabet = {
    letter: alphabet
  }

  $scope.countries = {
    country: countriesArray
  }
  $scope.startsWith = function(actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }
};

app.controller(controllers);