Angular - Storing and Reading checkbox list with states in the localStorage

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  <div ng-app="myApp">
  <div id="alarms" ng-controller="alarmColumnsController">
      <div>
          <h3>Alarm Columns</h3>
          <ul class="alarmColumnOptions" ng-repeat="alarmOptions in alarmColumns track by $index">
              <li><label><input type="checkbox" name="alarmOptions.columnName" ng-model="alarmOptions.value" ng-change="setAlarmColumns(alarmColumns)"> {{alarmOptions.columnName}}</label></li>
          </ul>
      </div>
  </div>
  </div>
</body>

</html>

// Code goes here
var myApp = angular.module('myApp',[]).controller('alarmColumnsController', ['$scope', function($scope) {

var initialAlarmColumns = [{
                    columnName: "Alarm",
                    value: true
                }, {
                    columnName: "Description",
                    value: true
                }, {
                    columnName: "Acknowledged by",
                    value: false
                }];

            if (localStorage.getItem('alarmColumns') === null) {
                localStorage.setItem('alarmColumns', JSON.stringify(initialAlarmColumns));
            }
            
            $scope.alarmColumns = JSON.parse(localStorage.getItem('alarmColumns'));

            $scope.setAlarmColumns = function(columnsChecked) {
                localStorage.setItem('alarmColumns', JSON.stringify(columnsChecked));
            };
        }]);

/* Styles go here */

.alarmColumnOptions{
  list-style-type: none;
}