Angular List Filter via click on letters

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

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script src="script.js"></script>

</head>

<body 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 " />
        <div ng-repeat="letter in alphabet.letter" ng-show="countriesFiltered.length > 0">
          <h3>{{letter}}</h3>
          <ul>
            <li ng-repeat="country in (countriesFiltered = (countries.country | filter:letter:startsWith | filter:search:startsWith))">{{ country }}</li>
          </ul>
        </div>

    </div>


</body>

</html>

// 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);

/* 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;
}