Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="myCtrl">
<div class="choose_file">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/ae/Landscape_in_the_Adirondacks_Frederic_Edwin_Church.jpg" style="height: 300px; width: 400px"></img>
<input ng-model="someRandomValue" type="file" ng-change="trigger()" />
</div>
</div>
CSS
body {
padding: 10px;
}
.choose_file{
position:relative;
display:inline-block;
}
.choose_file input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
height: 300px;
width: 400px;
opacity:0;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.trigger = function() {
alert("Changed");
};
});