Filtering in two different tabs (AngularJS)

Question

I have two tabs and have to implement filtering on both of them. In second tab everything works fine, but in first one not. I'm filling that problem relates to this part(ng-model):

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

and to this:

<input id="q" type="text" ng-model="search.district " />

So second tab works fine:

<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 ">
            <a href="{{ city.url }}">
                  {{ city.name }}
                </a>
        </li>
    </ul>
</div>

But how to make works first part I don't know...

Here is DEMO

Answer 1

Do this changes in HTML

<div class="tab-content active" data-id="first">
     <li ng-repeat='city in cities | filter:{name :search.district}:startsWith'>
            <a href="{{ city.link }}">
              {{ city.name }}
            </a>
     </li>
</div>

Here is the updatd Plunker