Trying to upload image and get it to display on screen

Question

I am trying to upload an image and get it to display onscreen but it isnt working. Can anyone help? I was attempting to base my solution on this example: http://jsfiddle.net/kkhxsgLu/2/

View

<div class="col-sm-6">
  Upload image:
  <br><br>
  <input id="file" type="file" accept="image/*" ng-model="file" ng-onchange="vm.imageUpload(this)"/>
  <br>
  <img ng-src="{{ file }}" />
</div>

Controller

var vm = this;
vm.file = {};

vm.imageUpload = function() {
  var reader = new FileReader();
  reader.onload = vm.imageIsLoaded;
  reader.readAsDataURL(element.files[0]);
};

vm.imageIsLoaded = function(e) {
  vm.$apply(function() {
    vm.file = e.target.result;
  })
}

Answer 1

I fixed it by looking at the answer to the following question: ng-model for <input type="file"/>. Simply needed to install the following directive: https://github.com/mistralworks/ng-file-model/ and set up my code in the view as follows:

  <input type="file" ng-file-model="file"/>
  <br>
  <img ng-src="{{ file.data }}" />