AngularJS image preview
<p>I have the following input file: </p>

<pre><code>&lt;div class="col s12"&gt;
     &lt;h6&gt;Foto&lt;/h6&gt;
     &lt;div class="file-field input-field"&gt;
          &lt;div class="btn pink darken-2 waves-effect waves-light"&gt;
               &lt;span&gt;Archivo&lt;/span&gt;
               &lt;input type="file" name="image" id="image"
               file-model="picture.image" custom-on-change="renderPreview"&gt;
           &lt;/div&gt;
           &lt;div class="file-path-wrapper"&gt;
               &lt;input class="file-path" type="text" readonly&gt;
           &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When the directive <code>custom-on-change</code> triggers, I get the file from the input (<code>console.log()</code> works here) so what I want to do next is do a preview of the image I just selected: </p>

<pre><code>$scope.renderPreview = function(event){
      var picture = event.target.files;
      console.log(picture);
      $('#image-preview').attr('src', picture);
}
</code></pre>

<p>Which is supposed to be placed here: </p>

<pre><code>&lt;h5 class="center-align"&gt;Vista Preliminar&lt;/h5&gt;
&lt;div class="col s6 offset-s3"&gt;
     &lt;div class="image-preview-container"&gt;
          &lt;img id="image-preview" class="z-depth-2"&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>However, no image is rendered. I've been trying to look for a solution to this, and people always send you to those angular file upload plugins.. I do not want to use those plugins for just a simple task like this.</p>

<p>Is there a way I can render the picture so that the user can see it just before uploading it? </p>

<p><strong>EDIT</strong></p>

<p>My custom-on-change directive: </p>

<pre><code>angular.module('sccateringApp')
  .directive('customOnChange', function () {
      return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var onChangeHandler = scope.$eval(attrs.customOnChange);
        element.bind('change', onChangeHandler);
      }
    };
  });
</code></pre>