I'm currently working on manipulating my DOM to show or hide a loading indicator while executing a controller action triggered by the ng-click directive.
This is how my code looks:
Controller:
$scope.isLoading = false;
// Set current category being listed
$scope.setCurrentCategory = function( category ) {
$scope.isLoading = true;
//...performing some heavy filtering operations here...
$scope.isLoading = false;
};
View:
<div ng-repeat="category in categories">
<a href="#" ng-click="setCurrentCategory(category);" >{{ category.name }}</a>
<img ng-cloak ng-show="isLoading" src="icons/spinner-mini.gif" />
</div>
The issue I'm facing is that the loading indicator only updates after the entire ng-click handler has finished, preventing the user from seeing it at all.
How can I ensure that the update of $scope.isLoading reflects in my view before the rest of the handler is executed?