javascript - AngularJS image preview -

i have following input file:

<div class="col s12">      <h6>foto</h6>      <div class="file-field input-field">           <div class="btn pink darken-2 waves-effect waves-light">                <span>archivo</span>                <input type="file" name="image" id="image"                file-model="picture.image" custom-on-change="renderpreview">            </div>            <div class="file-path-wrapper">                <input class="file-path" type="text" readonly>            </div>     </div> </div> 

when directive custom-on-change triggers, file input (console.log() works here) want next preview of image selected:

$scope.renderpreview = function(event){       var picture = event.target.files;       console.log(picture);       $('#image-preview').attr('src', picture); } 

which supposed placed here:

<h5 class="center-align">vista preliminar</h5> <div class="col s6 offset-s3">      <div class="image-preview-container">           <img id="image-preview" class="z-depth-2">      </div> </div> 

however, no image rendered. i've been trying solution this, , people send angular file upload plugins.. not want use plugins simple task this.

is there way can render picture user can see before uploading it?

edit

my custom-on-change directive:

angular.module('sccateringapp')   .directive('customonchange', function () {       return {       restrict: 'a',       link: function (scope, element, attrs) {         var onchangehandler = scope.$eval(attrs.customonchange);         element.bind('change', onchangehandler);       }     };   }); 

in code var picture array of files, use index show image

$scope.renderpreview = function(event){       var pictures = event.target.files;       $('#image-preview').attr('src', pictures[0]); } 

as per @hanlet escaño suggest try below code

$scope.renderpreview = function (event) {   if (event.target.files && event.target.files[0]) {     var reader = new filereader();      reader.onload = function (e) {       $('#image-preview').attr('src', e.target.result);     }      reader.readasdataurl(event.target.files[0]);   } };