How to display ordered list(with numbers) of items in lightning component?

We can use "indexVar" of <aura:iteration> tag to index the list of items.
Example: 
IterationExample.app :
<aura:application >
    <ltng:require styles="{!$Resource.SLDS100 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <div class="slds">
         <c:ListDescription />
    </div>
</aura:application>
ListDescription.cmp :
<aura:component>
    <aura:attribute name="fruits" type="List"
        default="['Apple.',
            'Orange.',
            'Banana.']"/>
    <b><h2>List of Fruits :</h2></b>
    <ol>
    <aura:iteration items="{!v.fruits}" var="fruit" indexVar="index" >
        <li>{!index+1}) {!fruit}</li>
    </aura:iteration>
    </ol>  
</aura:component>
Output :