Well, there is not really much to explain. https://jsbin.com/raqajelufu/edit?html,js,output Illegal invocation exception is raised on any File object property access after being copied with angular.copy.
Is there any workaround, which would make watching for File object possible, considering $watch is using angular.copy internally according to https://docs.angularjs.org/api/ng/type/$rootScope.Scope?
Which browser(s) are you seeing the issue on?
A similar question was asked a while ago which concluded that it could have to do with Chrome v43.
Some resources related to the issue:
Supposedly, Chrome v43 does not like the following in the angular.copy source:
var emptyObject = Object.create(Object.getPrototypeOf(source));
You could try any of the following to see if it suppresses your errors (regardless of your browser of choice):
angular.copy, by avoiding deep watches a la $scope.$watch('', fn, true)(jsbin) and go for something like _.cloneDeep(jsbin) from lodash when you need to make a deep copy of something.angular.copy does not call the above line. source (jsbin)If you want to watch deeply but avoid angular.copy, I would do something like this (with the help of lodash.merge):
$scope.$watch(function () {
return _.merge(src, dest);
}, callback);
That way you wouldn't call angular.copy and you would still have a 'deep watch' setup. Bare in mind, this is a very naive example and I have not tested it thoroughly but I think you could make it work very similarly to an angular deep watch with minimal effort.
Disclaimer: I haven't really dug that deep into what is actually going on the angular.copy source, the console and/or Chrome v43. It is somewhat of a gray area, but with the above suggestion(s) I have yet to trigger an Illegal Invocation.