angularjs - How to refresh an image after src change in Angular JS -

i selecta file , load in angular js.

everything work fine, problem image don't refrech. can see work because when toggle on menu on page angular.js image been refreshing.

here code :

<div ng-controller="topmenuctrl">         <button class="btn" ng-click="iscollapsed = !iscollapsed">toggle collapse</button>         <input ng-model="photo"            onchange="angular.element(this).scope().file_changed(this)"            type="file" accept="image/*" multiple />             <output id="list"></output>             <img ng-src="{{imagesource}}">     </div> 

and angular js script :

$scope.file_changed = function(element) {           var files = element.files; // filelist object           // loop through filelist , render image files thumbnails.           (var = 0, photofile; photofile = files[i]; i++) {                // var photofile = element.files[0];               var reader = new filereader();               reader.onload = (function(thefile) {                     return function(e) {                      $scope.imagesource= e.target.result;                      };                   })(photofile);                reader.readasdataurl(photofile);             };    } 

you must call scope.$apply when manually update $scope.imagesource in onload function, because angular can't guess when make change.