angularjs - watching object created on an inherited scope -

i'm trying create directive watches file being dragged onto element. issue can't seem trigger watch on scope.files i've tried creating isolated scope:

scope:{files:'='}  

and doing

scope.$watch('files',function(){}) 

inside link function, no luck.

how watch pick on files being updated?

i have added "scope.files = []" because null when watch being set up.

angular.module('myapp').directive('dragdrop', [function () { return {      link: function (scope, element, attrs) {         scope.files = [];         scope.$watch(scope.files, function () {             if (scope.files !== undefined && scope.files.length === 1) alert("a file has been dropped");         });         element.on('dragenter', function (e) {             e.stoppropagation();             e.preventdefault();             $(this).css('border', '2px solid #0b85a1');         });         element.on('dragover', function (e) {             e.stoppropagation();             e.preventdefault();         });         element.on('drop', function (e) {              $(this).css('border', '0px');             e.preventdefault();             //var files = e.originalevent.datatransfer.files;             scope.files = e.originalevent.datatransfer.files;          });     } }; 

you should set third parameter of $watch() true,

scope.$watch('files',function(){},true) 

here nice article $watch() vs. $watchcollection()

update

you cannot trigger watch there because using primitive object there here usage of complex object within directive...

plunker