JavaScript AngularJS

AngularJS 1.x - Validation on File Input type

<div class="form-group">
    <label class="col-md-2 control-label" for="photoUrl">Photo</label>
    <div class="col-md-4">
        <div class="input-group">
            <span class="btn btn-primary btn-file input-group-addon">
                Browse <input type="file" id="photoUrlSelector" name="photoUrlSelector" accept="image/*" >
            </span>
            <input class="form-control" type="text" id="photoUrl" name="photoUrl" data-ng-disabled="true">
        </div>
    </div>
</div>

<span class="btn btn-primary btn-file input-group-addon">
    Browse <input type="file" id="photoUrlSelector" name="photoUrlSelector" accept="image/*">
</span>

<span class="btn btn-primary btn-file input-group-addon">
    Browse <input type="file" id="photoUrlSelector" name="photoUrlSelector" ngf-select ng-model="vm.author.photoUrl" accept="image/*" data-ng-click="addAuthorForm.photoUrl.$touched=true">
</span>

<input class="form-control" type="text" id="photoUrl" name="photoUrl" data-ng-model="vm.author.photoUrl[0].name" data-ng-required="true" data-ng-disabled="true">

as you can see, the input field is also decorated with ng-required directive to enforce required field validation.

<div class="form-group has-feedback" data-ng-class="{'has-error':addAuthorForm.photoUrl.$invalid && addAuthorForm.photoUrl.$touched,
     'has-success':addAuthorForm.photoUrl.$valid && addAuthorForm.photoUrl.$touched}">
    <label class="col-md-2 control-label" for="photoUrl">Photo</label>
    <div class="col-md-4">
        <div class="input-group">
            <span class="btn btn-primary btn-file input-group-addon">
                Browse <input type="file" id="photoUrlSelector" name="photoUrlSelector" ngf-select ng-model="vm.author.photoUrl" accept="image/*" data-ng-click="addAuthorForm.photoUrl.$touched=true">
            </span>
            <input class="form-control" type="text" id="photoUrl" name="photoUrl" data-ng-model="vm.author.photoUrl[0].name" data-ng-required="true" data-ng-disabled="true">
            <span data-ng-if="addAuthorForm.photoUrl.$invalid && addAuthorForm.photoUrl.$touched" class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span data-ng-if="addAuthorForm.photoUrl.$valid && addAuthorForm.photoUrl.$touched" class="glyphicon glyphicon-ok form-control-feedback"></span>

        </div>
    </div>
    <span class="help-block">
        <span data-ng-show="addAuthorForm.photoUrl.$error.required &amp;&amp; addAuthorForm.photoUrl.$touched">The Photo is required field.</span>
    </span>
</div>