AngularJS show list of districts with cities in each of them via ng-repeat

<!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">

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

    <div class="container">

        <input id="q" type="text" ng-model="search.district " />
        
        <div ng-repeat="district in districts | filter:search:startsWith" class="district">
          
          <h4 class="district-name">{{ district.district }}</h4>
          <a href="{{ district.link }}">Some info</a>
          
          <ul class="district-cities">
            
            <li ng-repeat="city in district.cities ">
              {{ city }}
            </li>
          
          </ul>
          
          
        </div>

    </div>


</body>

</html>

// Code goes here

var app = angular.module('demo', []);
var controllers = {};
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
var districtsArrayNotSorted = [
  {district:'Beta district',link:'#',cities:['Jordda','Mamba','Nemessis']},
	{district:'Berta district',link:'#',cities:['Rumba','Samba','Chacha']},
	{district:'Alpha district',link:'#',cities:['Zumbida','Kappa','Numba']},
	{district:'Gamma district',link:'#',cities:['Zapdos','Pikachu']}
];
var districtsArray = districtsArrayNotSorted.sort(function(a,b){
	var distrA = a.district.toLowerCase(), distrB = b.district.toLowerCase();
	if ( distrA > distrB) return 1
});


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.districts = districtsArray;
  
  $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;
}

.district {
  border: solid 1px red;
  margin: 10px 0;
  padding: 10px;
}