title: AngularJS: upload file inside modal-ui-bootstrap
body: <p>I have an angular modal-ui, in it I upload file. The problem is that for some reason the <code>&lt;input&gt;</code> of the file doesn't triggers the app directive. The directive returns the file name and size when the <code>&lt;input&gt;</code> being changed.</p>
  
  <p>this is the result I want to get:<br>
  <a href="http://codepen.io/Ariel7342/pen/WQVvWN" rel="nofollow">example</a></p>
  
  <p>I really tried already any thing, but still for some reason I can't see in the <code>&lt;span&gt;</code> the file name.</p>
  
  <p>The html file :</p>
  
  <pre><code>&lt;form novalidate ng-submit="add(Form.$valid)" name="Form"&gt;
      &lt;div class="modal-header col-lg-12"&gt;
          &lt;h3 class="col-lg-4 col-lg-offset-4"&gt;add file&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="form-group col-lg-8" ng-class="{'has-error': notPass &amp;&amp; Form.fileName.$invalid}"&gt;
                      &lt;label class="control-label label-add-card" for="fileName"&gt;name&lt;/label&gt;
                      &lt;input class="input-add-card form-control " id="fileName" name="fileName" type="text"  ng-model="fileName" ng-pattern="/^[a-z1-9]{10,}$/" ng-required="true"&gt;
                      &lt;p ng-show="notPass &amp;&amp; Form.fileName.$invalid" class="help-block"&gt;not good&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="form-group col-lg-8" ng-class="{'has-error':notPass &amp;&amp; Form.fileExplain.$invalid}"&gt;
                      &lt;label class="control-label label-add-card" for="fileExplain"&gt;explain&lt;/label&gt;
                      &lt;textarea class="input-big form-control " id="fileExplain" name="fileExplain" type="text"  ng-model="fileExplain" ng-pattern="/^[a-z1-9]{1,}$/" ng-required="true"&gt;&lt;/textarea&gt;
                      &lt;p ng-show="notPass &amp;&amp; Form.fileExplain.$invalid" class="help-block"&gt;not good&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div class="form-group col-lg-12" ng-class="{'has-error':notPass &amp;&amp; Form.uploadDownloads.$invalid}"&gt;
  
                      &lt;input  ng-model="uploadDownloads" type="file" fd-input file-name="fileName" /&gt;
                      &lt;input  class="btn btn-primary" type="button" value="choose" onclick="$(this).parent().find('input[type=file]').click();"/&gt; &lt;!-- on button click fire the file click event --&gt;
                      &lt;span class="badge badge-important"&gt;{{fileName}}&lt;/span&gt;
                      &lt;p ng-show="notPass &amp;&amp; Form.uploadDownloads.$invalid" class="help-block"&gt;please choose&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="submit" class="btn btn-success col-lg-12 btn-modal-costume"&gt;add&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>the modal controller:</p>
  
  <pre><code>/**
   * Created by Ariel on 22/11/2015.
   */
  app.controller('uploadDownloadsController',function($scope,$modalInstance ){
      app.directive('fdInput', fdInput);
      function fdInput() {
          return {
              scope: {
                  fileName: '='
              },
              link: function(scope, element, attrs) {
                  element.on('change', function(evt) {
                      var files = evt.target.files;
                      console.log(files[0].name);
                      console.log(files[0].size);
  
                      scope.fileName = files[0].name;
                      scope.$apply();
                  });
              }
          }
      };
      $scope.fileName = '';
  
      $scope.add = function(valid){
          if(valid){
                  $scope.data = 'none';
                  var f = document.getElementById('uploadDownloads').files[0];
                  var r = new FileReader();
                  r.onloadend = function(e){
                      $scope.data = e.target.result;
                      $scope.notPass = false;
                      $modalInstance.close({
                          'data':$scope.data,
                          'fileName':$scope.fileName,
                          'fileExplain':$scope.fileExplain
                      });
                  };
              /*activate the onloadend to catch the file*/
                  r.readAsBinaryString(f);
          } else {
              $scope.notPass = true;
          }
      };
      $scope.cancel = function() {
          $modalInstance.dismiss('cancel');
      };
  });
  </code></pre>