title: Angular JS reset custom directive
body: <p>I want to reset this directive(clear the file chosen) when clear button is clicked. Currently even though when clear button is clicked , the file chosen is still exits and its not cleared.</p>
  
  <p>test.html</p>
  
  <pre><code>&lt;form class="form form-basic" id="testForm" name="testForm"&gt;
  
        &lt;div class="row"&gt;
          &lt;label class="col-md-6 control-label"&gt;File :&lt;/label&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="file" ng-model="test" on-read-file="loadContent($fileContent)" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;button class="btn btn-primary" ng-click="clear()"&gt;Clear&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>directive.js</p>
  
  <pre><code>fileAccessModule.directive('onReadFile', function ($parse) {
  return {
      restrict: 'A',
      scope: false,
      link: function (scope, element, attrs) {
          var fn = $parse(attrs.onReadFile);
  
          element.on('change', function (onChangeEvent) {
              var reader = new FileReader();
  
              reader.onload = function (onLoadEvent) {
                  scope.$apply(function () {
                      fn(scope, {$fileContent: onLoadEvent.target.result});
                  });
              };
  
              reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
          });
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <p>testController.js</p>
  
  <pre><code>    testControllerModule.controller('testController', function ($scope, $log, $location, deviceDetailsService) {
    $scope.clear = function () {
          $scope.connectionParams = null;
      };
  $scope.loadContent = function ($fileContent) {
          $scope.connectionParams.privateKey = $fileContent;
      };
  });
  </code></pre>