AngularJS Modal Dialog with File Upload Control not working - angularjs

Question

I am using AngularJS Modal Service. http://fundoo-solutions.github.io/angularjs-modal-service/
I setup it in a simple way
Button to open a Model
<div data-ng-controller="contest as vm">
<a class="btn btn-primary" data-ng-click="vm.createFileUploadDialog()">Upload Image</a>
</div>
Inisde Controller I have a function defined createFileUploadDialog and expose it from my viewModel.
vm.createFileUploadDialog = createFileUploadDialog;
vm.uploadme = {};
vm.uploadme.src = "";
function createFileUploadDialog() {
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
});
}
function uploadSuccess() {
console.log(vm.uploadme);
//need to call to the backend
}
And inside "fileUploadDialog.html" I have a simple markup
<div>
<input type="file" fileread="uploadme.src" />
</div>
"fileread" is a directive which return back the src of the File. Now the problem I have
As you can see I am doing console.log inside "UploadSuccess", in response I am getting the result "Object {src: ""}",
It looks like the Modal values not capture inside controller. But If I do the same with $rootScope, it logs out the File that need to upload. So, how can I access the value without using $rootScope? Please suggest
PS:
I am not define separate controller for Modal, want to use the same controller that treats my view.

Answer 1

** Modals scope is not the same as your controller scope!**
if you want to see your Controller scope inside of your modal and manupulate it , you're gonna have to use resolve inside of your modal markap like this :
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
resolve:{
controllerscope:function(){
return $scope;
}
}
});
And now , inside of your modal controller you can inject :** controllerscope ** and use it , also data binding works well like this :
app.controller('modalcontroller',function($scope,controllerscope){
// no you have access to your controller scope with **controllerscope**
})
So go and have a look at your modal plug in wich you are using and search for resolve and controller
thats it