scope variable not updating on view in ng-repeat - angularjs

Question

I have created a directive to handle multiple file uploads and defined a scope variable in the controller which holds the selected files. After selecting files the directive updates the parent scope with the file object.
I have used a loop to display multiple file uploads inputs.
Here is my controller
angular.module('myApp').controller('CompanyReviewsController', ['$state', '$scope', 'company', 'MediaUploadService', 'ReviewsService', 'rating_attributes', 'tags', function ($state, $scope, company, MediaUploadService, ReviewsService, rating_attributes, tags) {
$scope.company = company;
$scope.tags = tags;
$scope.rating_attributes = rating_attributes;
$scope.gallery = {
pictures: 0,
videos: 0,
};
$scope.reviewe_form_data = {
main_picture: null,
main_video: null,
review_subject: '',
review_description: '',
gallery: {
pictures: [],
videos: [],
}
};
}]);
Here is my Directive
angular.module('myApp').directive('fileUploadDirective', ['$parse', function ($parse) {
return {
scope:false,
link: function (scope, element, attrs) {
var model = $parse(attrs.fileUploadDirective);
var modelSetter = model.assign;
var valid_types = attrs.accept;
var valid_size = attrs.maxFileSize;//bytes
element.bind('change', function (event) {
var file = event.target.files[0];
scope.$apply(function () {
modelSetter(scope, file);
});
});}]);
Here is my view snippets
<div class="add-more-gallery-items add-more-gallery-images full-width clear-both pull-left">
<div class="gallery-item" ng-repeat="n in [].constructor($WU_APP_SETTINGS.pages_settings.write_review_page.gallery.pictures.maximum_pictures) track by $index">
{{reviewe_form_data.gallery}}
<div class="file-preview position-relative">
<span data-ng-if="reviewe_form_data.gallery.pictures[$index]" class="reset-image-preview wu-top-0-force wu-right-0-force" >
<img src="assets/images/close.png" alt="Close"/>
</span>
<img
alt="Review Gallery Image"
id="review-main-picture-{{$index}}"
data-file-preview-element="{{$WU_APP_SETTINGS.pages_settings.write_review_page.default_upload_image}}"
ng-src="{{$WU_APP_SETTINGS.pages_settings.write_review_page.default_upload_image}}"
/>
</div>
<input
file-upload-directive="reviewe_form_data.gallery.pictures[$index]"
data-max-file-size="{{$WU_APP_SETTINGS.pages_settings.write_review_page.gallery.pictures.max_picture_size}}"
accept="{{$WU_APP_SETTINGS.pages_settings.write_review_page.gallery.pictures.valid_picture_types}}"
class="upload"
type="file"
data-message-invalid-file="File not valid"
data-message-invalid-file-size="File size not valid"
data-file-preview-element="#review-main-picture-{{$index}}"
/>
</div>
</div>
In breif:
- I have a scope variable in controller
$scope.reviewe_form_data = {
main_picture: null,
main_video: null,
review_subject: '',
review_description: '',
gallery: {
pictures: [],
videos: [],
}
};
Above variable gets updated via directive(Working)
scope.$apply(function () {
modelSetter(scope, file);
});
But on view it shows empty object when i try to display the variable
{{reviewe_form_data.gallery}}