In the table generated dynamically using an ng-repeat, I have checkboxes.
The checkboxes are created as shown below:
<input type="checkbox" id="chkView{{::myObj.TeamId}}"
ng-disabled="disableView(myObj)"
ng-click="setViewSelection(myObj.TeamId, this.checked)">
Intentionally, there is no ng-model attribute assigned to the checkboxes. The idea was to directly manage the checked status of each checkbox through JavaScript.
Strange enough, updating the checked property of the checkbox programmatically using JavaScript doesn't reflect on the UI. For instance, if I run:
document.getElementById('chkView27').checked = true;Even though the above code logs true when checked via console,
console.log(document.getElementById('chkView27').checked);The browser still displays the checkbox as unchecked. I've ensured that no other factors interfere with the checked property post-update. It seems like the UI fails to update. Any insights into why?
UPDATE: Following prasad's advice, I attempted wrapping the statement in $scope.$apply:
$scope.$apply(function() {
document.getElementById('chkView27').checked = 'checked';
});
This results in Angular throwing an "Action already in progress" error.
https://docs.angularjs.org/error/$rootScope/inprog?p0=$digest