Workaround for `TypeError: Illegal invocation` when working with angularJS, angular-formly and ng-file-upload

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/api-check/7.5.0/api-check.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/6.24.23/formly.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.0.0/angular-formly-templates-bootstrap.min.js"></script>
    <script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MainController">
      <form>
        <formly-form fields="fields">
          <input type="submit" />
        </formly-form>
      </form>
    </div>
  </body>

</html>

// Code goes here

var app = angular.module('app', ['formly', 'formlyBootstrap', 'ngFileUpload'], function config(formlyConfigProvider) {

  // changed ng-model to store randomVar instead of model[options.key]
  formlyConfigProvider.setType({
    'name': 'file',
    'extends': 'input',
    'template': '<button ngf-select ng-model="myFile">Select file</button>'
  });
});

app.controller('MainController', ['$scope', function($scope) {

  // will store the field information, replaces the model[options.key] in the field template
  $scope.myFile = '';

  $scope.fields = [{
    'key': 'file',
    'name': 'file',
    'type': 'file',
    'templateOptions': {
      'label': 'file upload'
    },

    // Adding a controller to due the changes needed
    controller: function($scope) {

      // Watching value that stores information of selected file  		  
      $scope.$watch('myFile', function(file) {
        var fileCopy; // Will store an updated copy of `file`

        if (file) {
          // At this point `file.lastModifiedDate` is a date object but its
          // not a valid value.

          // Create o copy of `file` and proceed to update
          // the `lastModifiedDate` (as a string) The reason behind creating a
          // copy of `file` is because you can't modify its `lastModifiedDate`
          // value directly "JS restrictions"

          fileCopy = jQuery.extend({}, file); // Copy
          fileCopy.lastModifiedDate = new Date().toString(); // Update

          // If at this point you try to update the model with the current
          // `file` value `$scope.model[file] = file;` you will get the
          // TypeError: `Illegal invocation` instead store the copy
          // console.warn(file.lastModifiedDate, fileCopy.lastModifiedDate) 
          $scope.model[file] = fileCopy; // Update model

          // At this point you should be able to select files and not get the
          // `TypeError: Illegal invocation` error. Cheers!
        }
      })
    }
  }];
}]);

/* Styles go here */

html {
  font-size: 16px;
  font-family: helvetica;
}

button,
input {
  background-color: #39f;
  border: none;
  border-radius: 0.1875em;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.625em 1.25em;
}

input {
  background-color: #ccc;
  margin-top: 1.25em;
}

label {
  color: #666;
  display: block;
  font-size: 0.6rem;
  margin-bottom: 0.4em;
}