material-steppers/lib/mdStep.tpl.html

Angular Steppers directive for Angular Material

<div class="md-stepper" ng-class="{ 'md-active': $ctrl.isActive() }">
    <md-steppers-header class="md-steppers-header md-steppers-vertical">
        <button class="md-stepper-indicator" ng-class="{
                    'md-active': $ctrl.stepNumber === $ctrl.$stepper.currentStep,
                    'md-completed': $ctrl.$stepper.isCompleted($ctrl.stepNumber),
                    'md-error': $ctrl.hasError,
                    'md-stepper-optional': $ctrl.optional || $ctrl.hasError
                }" ng-click="$ctrl.$stepper.goto($ctrl.stepNumber)" ng-disabled="$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep">
                <div class="md-stepper-indicator-wrapper">
                    <div class="md-stepper-number" ng-hide="$ctrl.hasError">
                    <span ng-if="!$ctrl.$stepper.isCompleted($ctrl.stepNumber)">{{ ::$ctrl.stepNumber+1 }}</span>
                        <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="$ctrl.$stepper.isCompleted($ctrl.stepNumber)"></md-icon>
                    </div>
                    <div class="md-stepper-error-indicator" ng-show="$ctrl.hasError">
                        <md-icon md-svg-icon="steppers-warning"></md-icon>
                    </div>

                    <div class="md-stepper-title">
                        <span>{{ $ctrl.label }}</span>
                        <small ng-if="$ctrl.optional && !$ctrl.hasError">{{ $ctrl.optional }}</small>
                        <small class="md-stepper-error-message" ng-show="$ctrl.hasError">
                            {{ $ctrl.message }}
                        </small>
                    </div>
                </div>
                </button>
        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">
            {{stepper.feedbackMessage}}
        </div>
    </md-steppers-header>
    <md-steppers-scope layout="column" class="md-steppers-scope" ng-if="$ctrl.isActive()" ng-transclude></md-steppers-scope>
</div>