Неправильная фильтрация списка, созданного с помощью ng-repeat (AngularJS)

У меня есть массив с районами и массивами с городами внутри каждого из них. Я создал список через bg-repeat:

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

Все работает нормально, когда мы нажимаем на письмо, из которого начинается регион, но когда мы нажимаем на какую-то букву, это не первая буква округа, но в то же время это присутствие в одном из городов, затем фильтрация работает неверен.

Здесь работает Plnkr. Когда вы пытаетесь нажимать буквы A, B or G все в порядке, но как только вы нажимаете букву Z, появляются два района, которые не начинаются с буквы Z, но содержат города, содержащие букву Z

Извините, может быть, элементарный вопрос, но как решить эту проблему?