title: How to select a file using Angularjs?
body: <p>I am working on an Angularjs application. </p>
  
  <p>I am able to call the function when selecting a file, but it does not pass the selected file into the Angularjs function. I get an <em>undefined</em> value in the variable <code>selectedFile</code>.</p>
  
  <p>I am using a trigger to open the file picker as follows:</p>
  
  <pre><code>$scope.clickUpload = function () {
      angular.element('#uploader').trigger('click');
  }
  </code></pre>
  
  <p>The following is my HTML:</p>
  
  <pre><code>&lt;button type="submit" ng-click="clickUpload()"&gt;
  &lt;span&gt;Upload Image&lt;/span&gt;
  &lt;/button&gt;
  &lt;input id="uploader" hidden type="file" ng-accept="'.jpg,.png,.gif,.jpeg,.webp'" ngf-select="uploadFile(selectedFile)" ng-model="selectedFile" name="file" /&gt;
  </code></pre>
  
  <p>Below is my Angularjs function to upload the file that has been selected:</p>
  
  <pre><code>$scope.uploadFile = function (selectedFile) {
      alert(selectedFile);
  }
  </code></pre>
  
  <p>What is the mistake I have made? Thank you for reading my question.</p>