title: AngularJS image preview
body: <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>