I am facing this problem while selecting file and showing its name on span. So basically I am trying that whenever I select some file I want to change the span Tag. This is my view

<form name="fileUploadForm" ng-submit="submitFile(fileUploadForm.$valid)">
          <div class="form-group upload-btn-wrapper">
              <input type="file" class="form-control" id ="myFileField" file-input="patient_file" required />
              <button class="csv-upload-btn">choose file</button>
              <span id="file-chosen">{{ patient_file }}</span>
          </div>
          <div class="form-group">
            <input type="submit" value="Upload" class="btn btn-primary">
          </div>
        </form>

following is my directive code

    (function() {
  angular.module('practimyze.dashboard')

  .directive('csvUploader', ["$parse", function($parse) {
    return {
      restrict: 'EA',
      templateUrl: "dashboard/breakdown/csv-uploader/csv-uploader.tpl.html",
      replace:  true,
      controller: function($scope, valueHandler, Auth, $rootScope, blockUi, DashboardApi, fileUploadService, apiLinks, toaster){

      },
      link: function(scope, element, attrs) {
        var model = $parse(attrs.csvUploader);
        var modelSetter = model.assign;
        
        element.bind('change', function() {
           scope.$apply(function() {
              modelSetter(scope, element[0].patient_file);
           });
        });
     }
    };
  }]);
})();

Initially I did this

$parse.assign(scop, element[0].files);

this was getting me error that parse has not function assign. Then I changed it to what i have written now it says (modelSetter is not a function).

I am not sure where i am doing wrong, Please help me out thanks

Edited: this is the fiddle link, it seems to be working perfect there fiddle link