With all this CSS in place, your app should be looking like this:

Styling the app

Sorting the contacts alphabetically

This looks nice, but it would be a good idea to have the names sorted alphabetically. For this, we will use angularjs‘s built-in filter called orderBy.

In angularjs, filters are used to format the data. One can use angularjs‘s predefined filters or create your own. We’ll learn more about filters later in this book.

All we need to do is modify the following section of the index.html as follows:

<div class="contact-item" ng-repeat="person in people| orderBy:'name'">
<div class="name">{{person.name}} - {{person.phone}}</div>
<span class="city">{{person.city}} </span>
</div>

Refresh your Index.html in the browser and you should notice the names are now sorted alphabetically.