I have following bootstrap html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form ng-submit="setFile()" enctype="multipart/form-data">
<div class="modal-body">
<input type="file" accept="image/*">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
And following function in controller
$scope.setFile = function () {
console.log($scope.image); // this console logs undefined
}
The above code somehow does not get image from input type file. How can I get that image and the I want to preview it when user clicks submit button?
UPDATE
I want to get file on form submit not on input change.