Use ng-click to toggle checkboxes by altering element

I have a list of checkboxes generated using material design using the MUI CSS framework, the code below basically basically loops through an array and display 5 checkboxes.

The <i> tag contains either 'check_box' OR 'check_box_outline_blank' - if it shows 'check_box' this "checkbox" appears ticked, if it contains 'check_box_outline_blank' it will show the "checkbox" appearing as unticked.

Using ng-click I want to utilise the function toggleNetwork to basically toggle the <i> tag to contain either 'check_box' OR 'check_box_outline_blank'

// HTML

<div class="detail permissions" ng-class="{unfolded: role.showDetails != 'permissions'}" border-watch>
   <ul>
     <li ng-repeat="page in rule.pages" ng-click="toggleNetwork(this); ruleForm.$setDirty()">
      <span class="pull-left"><i class="check material-icons nomargin ">check_box</i></span>
      <i class="icon icon-"></i>
      <span class="permission-description"></span>
     </li>
   </ul>
</div>

// Javascript

$scope.toggleNetwork = function(this) {
  // change the `<i>` element to either 'check_box' OR 'check_box_outline_blank'
}