angularjs ng-show delay in showing div

Question

I am fairly new to Angular. I have a file input

<input type="file" id="sampleFile" onchange="angular.element(this).scope().vm.displaySelectedXml()" />

with a div below it:

<div ng-hide="!vm.displayXml">
    <div> xml file display goes here </div>
</div>

I got the onchange event handler from here.

My controller js has the following function:

function displaySelectedXml() {
    vm.displayXml = true;
}

So when a file is selected (that is different from the previous, or the first one) the onchange should trigger and call the fn above, which sets the flag to true, which should then show the contents of the div.

The problem is that it takes about 30 to 60 secs for the div to display. When I set the breakpoint in the function above and select a file, the function is called right away. The file I select is less than 1k, so it's very small. It seems that the delay is occurring somewhere in the Angular layer. Could this be the case? Anybody know why this could be happening? Thanks in advance. This happens in both IE and Chrome.

Answer 1

Problem here is that you change a scope variable from outside, which angular is not able to recognize. The change will only be applied in the next diggest cycle. You can fix this by adding a $scope.$apply:

onchange="var scope = angular.element(this).scope(); scope.vm.displaySelectedXml(); scope.$apply()"

Answer 2

Much cleaner way to achieve the same effect:

<input type="file" id="sampleFile" ng-change="vm.displaySelectedXml()">