footer.html

<div class="row">
    <div class="col-sm-12 col-md-2 margin-top-10">
        Question {{examInfo.currentQuestion}} of {{examInfo.totalQuestions}}
    </div>
    <div class="col-sm-12 col-md-5">
        <div class="progress" style="height: 20px;">
            <div class="progress-bar" role="progressbar" style="width: {{progress}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="col-sm-12 col-md-5">
        <button type="button" class="btn btn-primary">
            Blank <span class="badge badge-light">{{examInfo.notResponded}}</span>
        </button>
        <button type="button" class="btn btn-success">
            Correct <span class="badge badge-light">{{examInfo.correctAwnsers}}</span>
        </button>
        <button type="button" class="btn btn-danger" >
            Incorrect <span class="badge badge-light">{{examInfo.wrongAwnsers}}</span>
        </button>

        <a class="btn btn-outline-secondary float-right" aria-label="Info">
            <i class="fa fa-info" aria-hidden="true"></i>
        </a>
        <div  class="clock" ng-if="examInfo.finish">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            <span>{{ ("0" + examInfo.finishTime.hours()).slice(-2) }}:{{ ("0" + examInfo.finishTime.minutes()).slice(-2) }}:{{ ("0" + examInfo.finishTime.seconds()).slice(-2) }}</span>
        </div>
        <div bs-time-counter date="examInfo.time" direction="'up'" class="clock" ng-if="!examInfo.finish">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            <span>{{  ("0" + hours).slice(-2) }}:{{ ("0" + minutes).slice(-2) }}:{{ ("0" + seconds).slice(-2) }}</span>
        </div>
        <!--10 Not Responded | <span class="text-success">10 Correct</span> | <span class="text-danger">10 Incorrect</span>-->
    </div>
</div>