title: How do I capture the value of a file input in AngularJS?
body: <p>I'm really new to AngularJS and I've found that ng-model doesn't work for a file type input tag. I want to be able to allow users to upload pictures to my app, but nothing I've tried so far has worked. I've tried to use both ng-file upload and angular-file upload, but they both require dependency injection and whenever I try that my entire app crashes. I've been reading that a new directive can be created, but I am so new to Angular that I'm not understanding how to do that. Any insight would be great! </p>
  
  <p>postImage.html :</p>
  
  <pre><code>&lt;div id="postimage container" &gt;
  &lt;div &gt;
      &lt;input type="file" name="image" np-model="$ctrl.image"/&gt;
      &lt;button ng-click="$ctrl.upload($ctrl.image)"&gt;Upload&lt;/button&gt; 
  &lt;/div&gt;       
  </code></pre>
  
  <p></p>
  
  <p>postimage.js :</p>
  
  <pre><code>angular.module('main')
  
  .component('postimage', {
    controller: function () {
      this.upload = function (data) {
       console.log(data)
      }
    },
    templateUrl: '../templates/postImage.html'
  });
  </code></pre>