Vfrdtyky

I have an agularjs directive for picking image for image upload. The directive looks like this:

.directive('imagePickerTwo', ['$timeout', 'clipBoardService', function ($timeout, clipBoardService) {

    return {

        scope: {

            track: '=',

            changedp: "&"

        },

       template: '<button type="button" class="btn-upload-profile-image">Change Image{{track.id}}</button> <input id="file-input" type="file" ngf-pattern="'image/*'"n' +

            'accept="image/*" class="hidden-xs-up"> <img ng-src="{{track.imageSrcCropped}}">',

        link: function (scope, element, attrs) {



            console.log(scope.track); //-----------log 1 works correctly



            element[0].querySelector('.hidden-xs-up').addEventListener('change', function (evt) {



                console.log(scope.track); //----------log 2. Not working. Value not updated



                var f = this

                var files = evt.target.files;

                var fileToLoad = files[0]

                var fileReader = new FileReader();

                fileReader.onload = function (fileLoadedEvent) {

                    var srcData = fileLoadedEvent.target.result; // <--- data: base64

                    scope.imageSrc = srcData

                    f.value = null

                    clipBoardService.setImageForTrackUploadPopUp(scope.imageSrc, scope.track.id)

                    scope.changedp()

                }

                fileReader.readAsDataURL(fileToLoad);

            });

            element.bind('click', function (evt) {

                //fire file input

                //$timeout(function () {

                document.getElementById('file-input').click()

                //}, 0);

            });

            // })

        }

    }

}]);

The HTML code where I access the directive looks like this. This piece of code comes inside an ng-repeat where a track json-array is looped:

<div class="upload-track-image" track=track changedp="changedp() "image-picker-two></div>

Here track is a json which is passed to the directive from the html which is two way bound. The array will be pushed with new track jsons where each json will have a unique id.
My problem is that when I log the scope.track.id it shows the correct value the first time. But when I pick the image the second time the log 1 is coming correct but the log 2 comes wrong. track.id is not getting updated with the new value. It logs the old track.id.

Basically the problem is that inside the link function the value is updated but inside the querySelector function the value is not being updated.

I tried to pass the track.id separately to the directive like I passed the track json, but using one way binding. But still the same issue is coming.

I've been trying to solve this problem. But nothing is working out. Please help. Any help would be appreciated.

Thanks in advance.