Show base64 image with data-ng-src

Question

I'm trying to make image preview after file select in AngularJS

Its HTML I'm using for selecting file and displaying it with ng repeat

 <input type="file" file-input="files" multiple />
 <li ng-repeat="file in files">[[file.name]] <img data-ng-src="[[todata(file)]]"></li>

and its my angular code

app.directive('fileInput', ['$parse', function($parse){
               return {
                   restrict:'A',
                   link:function(scope,elm,attrs){
                       elm.bind('change', function(){


                           $parse(attrs.fileInput)
                           .assign(scope,elm[0].files)
                           scope.$apply()

                       })
                   }
               }

           }])
.controller('fileUploader', ['$scope', '$http', 
                      function ($scope, $http) {

                          $scope.todata = function(file) {
                             var oFReader = new FileReader();
                           oFReader.readAsDataURL(file);

                           oFReader.onload = function(oFREvent) {
                               return oFREvent.target.result
                           }; 
                          }
                }]);

Its displaying image name but not image itself, todata function in console logging base64 converted image but in HTML its displaying nothing ..

How to display image for preview?

Edit

console.log(oFREvent.target.result); works fine but its the only one that working

Answer 1

You data-ng-src should be prefixed with "data:image/png;base64,iVBORw0..." You can find a better description here