How to divide separate parts the list created via ng-repeat?

Question

I made list of countries that are shown via ng-repeat:

<ul>
    <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
</ul>

Before that I've created an sorted array with all that countries:

var countriesNotSorted = ['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain','Indonesia','Germany','Brazil','Portugal','Polska','Uganda','Algeria','Andorra'],
    countriesArray = countriesNotSorted.sort();

Also I have list with clickable letters, when one of them is clicked list become sorted. Question is: is it possible in very beggining to divide the list of countries (that are shown via Angular ng-repeat) on separate parts, so Algeria, Andorra, Argentina and all countires start on 'A' will appear after some heading (e.g uppercase letter 'A')?

A:
Algeria
Argentina
Andorra

B:
Brazil
Bolgaria
Belgium

Here is my Plnkr

Thanx for your attention and time in advance

Answer 1

You can simply ng-repeat over your alphabet array.

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

Plnkr