Angular-wizard : How to bind the li element to an id inside ng-repeat to display different images for different li


I am using the angular-wizard in ionic for mobile, and customizing the look and feel of the progress bar element. Here is the link

This is my html code

<ul class="steps-indicator">
    <li ng-repeat="step in steps">
        <a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>

And this is my css :

.steps-indicator li a:before{
    content:url('/img/wizard-arrow.png') no-repeat;

The thing i am trying to achieve here is to show different images in front of different anchor elements. Something like this

Any help would be appreciated!! @Calendee @mhartington


You should be able to just do this.

<ul class="steps-indicator">
    <li ng-repeat="step in steps">
        <img ng-src="{{step.icon}}">
        <a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>


Could you please provide a codepen as i am not able to figure it out . I made this change and in my html file but its not displaying the image

wz-step title=“Basic Info” icon = “img/rightArrow.png”


Can you provide a codepen of what you have so far?


Here is a sample codepen , What i want to do is replace the arrow with different pics like above

See the Pen rVQojO by Gaurav Sarma (@gau4sar) on CodePen.

Any help @mhartington ??