Angular: Refresh DOM after manupulating code using browser console javascript

Question

A website is written in Angular.js and they have filtering options which have all the categories checked by default with No "Clear All" filter options.

Like this website image (This is Amazon), they have a clear button, but the website I want to work on (can't disclose the name) does not have the clear all filter button ( website is made in Angular).

So, I managed to use Javascript to clear all the checkboxes and were unchecked using this Code snippet entered in the Browser console.

var inputs = document.getElementsByTagName('input');

for (var i=0; i<inputs.length; i++)  {
  if (inputs[i].type == 'checkbox')   {
    inputs[i].checked = false;
  }
}

And using this snippet in the Chrome Browser console, I was able to uncheck all the checkboxes but it did not make the changes to the dom and products did not get filtered. They remained the same as if all the check box were still checked.

Is there any way to refresh the DOM, after writing the js snippet in console log so that the DOM can check the changes and update the page?

Thanks

Answer 1

You might need to trigger a new digest cycle so that AngularJS picks up the changes. You can do that by getting the scope of an element and triggering it's $apply function:

angular.element('input').scope().$apply()