Error showing image preview in angularjs with css

I am working with ng-file-upload to work with images. In if I have two options to upload an image for each one. When I show the first image it is shown in my first ng-model but when I show my second image in my second ng-model it is not shown but it is written on my first ng-model. Below I share my html view

<div class="row">
    <div class="col s12 m12 hide-on-med-and-down">
      <div class="image-upload">
        <label for="file-input">
          <i class="material-icons left teal-text">photo_camera</i>
          Agrega imagen 1...
        </label>
        <input
          id="file-input"
          type="file"
          ngf-select
          ng-model="data.imagen_promocion"
          name="file"
          ngf-pattern="'image/*'"
          accept="image/*"
          ngf-max-size="3MB"
        />
      </div>
      <img ngf-thumbnail="data.imagen_promocion || '/thumb.jpg'"/>
    </div> 
    <div class="col s12 m12 hide-on-med-and-down">
      <div class="image-upload">
        <label for="file-input">
          <i class="material-icons left teal-text">photo_camera</i>
          Agrega imagen 2...
        </label>
        <input
          id="file-input"
          type="file"
          ngf-select
          ng-model="data.imagen_promocion2"
          name="file"
          ngf-pattern="'image/*'"
          accept="image/*"
          ngf-max-size="3MB"
        />
      </div>
      <img ngf-thumbnail="data.imagen_promocion2 || '/thumb.jpg'"/>
    </div> 
  </div>

The error is in my css

.image-upload > input{
  display: none;
}
.image-upload i{
  font-size: 30px;
  cursor: pointer;
}

If I delete this css my code works correctly. this is my jsfiddle How can I solve this error? I thank you in advance