How to save dynamic checkbox state after page refresh?

I am trying to save the state of the checkbox even after refreshing the page. I can get the index of each dynamic checkbox so I know which checkbox is checked, however I can't get the checkbox to remain the same even after page refresh. I tried using localStorage to save locally, even though it stores the value, it doesn't keep checkbox state the same:

Dynamic Checkbox HTML:

<input type="checkbox" ng-model="checkbox[$index]" ng-change="alert($index)">

Get Dynamic checkbox index:

$scope.checkbox = []; //checkbox index
$scope.alert = function(index, event){
  localStorage['checkbox'] = $scope.checkbox[index];
  alert("checkbox " + index + " is " + $scope.checkbox[index]);

}

//Check for changes and update

localStorage.getItem("checkbox") ? 
JSON.parse(localStorage.getItem("checkbox")) : false;

$scope.$watch(localStorage['checkbox'], function (newVal, oldVal) {
  if (oldVal !== newVal) {
    localStorage['checkbox'] = newVal;
  }
});