javascript - Filtering in two different tabs (AngularJS) -

i have 2 tabs , have implement filtering on both of them. in second tab works fine, in first 1 not. i'm filling problem relates part(ng-model):

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

and 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 make works first part don't know...

here demo

do 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 updatd plunker