aura:iteration index is empty

Question

I'm trying to conditionally format my items in a Winter'17 Org based on a selected index. But comparing the iteration index to my selected index (v.Active) doesn't work. I tried to output it and it seems to be empty.

<aura:iteration items="{!v.Items}" var="item" indexVar="index">                    
<li class="{!'slds-tabs--path__item slds-is-' + (index >= v.Active ? 'complete' : 'incomplete')}" role="presentation">
    [...]
        <span class="slds-tabs--path__title">
            <ui:outputtext value="{!item + ' - ' + index + ';'}" />
        </span>
    [...]
</li>

If I use the index in an output element, it just stays empty

Is this a Winter'17 issue? I it should work based on the SFDC Documentation. aura:iteration

Edit:

Component: ImportWizardTabBar

<aura:component>
<aura:attribute name="Items" type="string[]" default="['1','2','3']" />
<aura:attribute name="Active" type="integer" />    
<aura:registerevent name="tabChange" type="c:StringEvent" />

<div class="slds-grid">
    <div class="slds-tabs--path" role="application">
        <ul class="slds-tabs--path__nav" role="tablist">
            <aura:iteration items="{!v.Items}" var="item" indexVar="index">                    
                <li class="{!'slds-tabs--path__item slds-is-' + (index >= v.Active ? 'complete' : 'incomplete')}" role="presentation">
                    <a class="slds-tabs--path__link" id="tabs-path-2327" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
                        <span class="slds-tabs--path__stage">
                            <c:svgIcon svgPath="/resource/slds102/assets/icons/utility-sprite/svg/symbols.svg#check" category="standard" size="large" name="user" />
                        </span>
                        <span class="slds-tabs--path__title">
                            <ui:outputtext value="{!item + ' - ' + index + ';'}" />
                        </span>
                    </a>
                </li>

            </aura:iteration>
        </ul>
    </div>
</div>

App: ImportWizard

<aura:application  extends="force:slds">
<c:ImportWizardTabBar Items="[
    'Select File', 
    'Import Data', 
    'Map Fields', 
    'Preview Data', 
    'Finish Import']" Active="0" />
</aura:application>

Answer 1

Ok, it seems that my svgIcon Component is causing the problem, I removed it and suddenly the index is working. Puting the text before the Icon works also (but looks ugly)

<a class="slds-tabs--path__link" id="tabs-path-2327" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
    <span class="slds-tabs--path__title">
        <ui:outputtext value="{!item + ' - ' + index + ';'}" />
    </span>
    <span class="slds-tabs--path__stage">
        <c:svgIcon svgPath="/resource/slds102/assets/icons/utility-sprite/svg/symbols.svg#check" category="standard" size="large" name="user" />
    </span>
</a>

thanks @javanoob for the test, which pointed me into the direction.