AngularJS - binding input file scope to a different scope - forms

Question

Wasn't sure how to properly title my question, I guess in my case it can also be titled "DOM manipulation not being detected by the scope", but it all depends on the approach of my problem.
To start off, I followed an official example on AngularJS main website with the Projects app which connects with Mongolab. The only difference is I want to add a file input, that reads file name and its lastModifiedDate properties and then applies those values to my form. To make file input work I followed this example here.
I made it work, but the problem is that when values get applied to my form scope is not picking up the changes.
I am doing DOM manipulation in my .apply() function and using $compile too, but something is missing. Or perhaps there's an easier way altogether without doing DOM manipulation?
Here's what I have so far, please take a look at this plunker - http://plnkr.co/edit/mkc4K4?p=preview
(Just click on the plus sign icon to add new entry, then try choosing a file.)

Answer 1

You need to add a watch statement in the CreateCtrl
function CreateCtrl($scope, $location, Movie) {
$scope.inputfile = {};
$scope.movie = {};
$scope.$watch('inputfile.file', function(value){
$scope.movie.filename = value ? value.name : '';
$scope.movie.dateadded = value ? value.lastModifiedDate : '';
})
$scope.save = function() {
Movie.save($scope.movie, function(movie) {
$location.path('/edit/' + movie._id.$oid);
});
};
}
Demo: Sample