AngularJS - binding input file scope to a different scope

Question

AngularJS - binding input file scope to a different scope

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.)

forms
input
angularjs
scope
bind

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