Dynamic index id

I am inside a repeat and accessing the $index property to make unique IDs and names for form elements, however I also want to display the name on the front end.

This works for the IDs and Names

dmx-bind:id="'number'+$index"

Now to display it on the browser

{{number[$index].file.name.default("Choose your file")}}

And that does not work, I could not describe how many forms of syntax I have actually tried, but so far I cant get it right. here is the real use case scenario

<div class="form-row mb-4" dmx-repeat:repeat_slides="scf_accom_ss_image.inp_accom_slideshow_amount.value.toNumber()">
	<div class="col-sm-6">
		<div class="custom-file">
			<input type="file" class="custom-file-input" dmx-bind:id="'inp_accom_ss_image_url'+$index" accept=".jpg" data-rule-maxfiles="1" required="" dmx-bind:name="'accom_ss_image_url'+$index">
			<label class="custom-file-label" dmx-bind:for="'inp_accom_ss_image_url'+$index">{{inp_accom_ss_image_url{{$index}}.file.name.default("Choose file (Minimum width 864px)")}}</label>
		</div>
		<div class="progress" dmx-show="state.uploading">
			<div class="progress-bar progress-bar-animated progress-bar-striped bg-info" role="progressbar" aria-valuenow="uploadProgress.percent" aria-valuemin="0" aria-valuemax="100" dmx-style:width="uploadProgress.percent+'%'">
			</div>
		</div>
	</div>
</div>