I have set up a specific example in a jsbin: http://jsbin.com/deqerelita/1/
Situation The concept is quite straightforward. You click a button, the controller adds to the model, and the view updates accordingly with a hidden input type="file". After the view is updated, the controller clicks the last file input added.
Issue When the controller clicks the file input before running $scope.$apply() nothing happens until the second click, presumably because Angular has not yet registered the new input. When I run $scope.$apply(), the console throws errors but does successfully click the input.
HTML Code:
<div ng-controller="fileButtons">
<input type="button" ng-click="handleImage.add()" value="add another file button"/>
<div class="imageUploadPreviewContainer">
<div class="imageUploadPreview hide" data-ng-repeat="file in files" file-index="{{$index}}">
<input type="file" class="hide"/>
</div>
</div>
</div>
</div></div>
Angular JS Code:
var myApp = angular.module('myApp', []);
myApp.controller('fileButtons', ['$scope', '$log',
function($scope, $log){
$scope.files = [];
$scope.handleImage = {
add: function(){
$scope.files.push({
state : 'started'
});
$log.log('added');
$scope.$apply();
angular.element('.imageUploadPreviewContainer .imageUploadPreview:last input[type=file]').trigger('click')
}
}
}
]);
New to Angular, so please excuse any amateurish design flaws