Javascript/Angular: clear image select form input
<p>All of this is in angular. </p>

<p>Without too many boring details, I have an image upload button that doesn't actually upload images. Instead, the 'dummy' form element just passes information on to a different array that shows little preview thumbnails of the image and gives the user the option to delete any they don't want to upload.</p>

<p>All of this is working rather neatly (as neatly as image upload ever works), except for one irritating detail: </p>

<p><a href="https://i.stack.imgur.com/tBFY3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tBFY3.png" alt="choose file screenshot"></a></p>

<p>The 'dummy' button always displays the number of images last 'uploaded' even though the user might have deleted those images from the actual array of record. The button can also be used multiple times, so it could say '2 files' when in fact there are 8 files. Or 10. Or 0.</p>

<p>I want to empty that input via the controller after adding its contents to the array of record, but I can't figure out how.</p>

<p>I've tried <code>nulling</code> out the model for the input, per an <a href="https://stackoverflow.com/questions/21708689/clear-text-input-on-click-with-angularjs">SO answer</a> that is:</p>

<pre><code>vm.addImages=null;
</code></pre>

<p>No luck. Still '2 files'.</p>

<p>I've tried rummaging around in the form object itself, again via an <a href="https://stackoverflow.com/questions/14684877/angular-clear-form-input-after-submit">SO answer</a> but I don't want to clear the entire form, just this one element.</p>

<p>Here's the relevant <code>$watch</code> from the controller:</p>

<pre><code>$scope.$watch('vm.addImages', function() {
        if(vm.addImages.length){
            _.each(vm.addImages, function(image){
                vm.building.images.push(image);
            });
            vm.addImages = null; //this is the issue.
        }
    });
</code></pre>

<p>Any ideas?</p>

<p>Thanks.</p>