angularjs - Retrieving selected checkbox value after page reload -

i trying use cookies hide , show columns in table instead of storing selected checkbox values in database. problem having not able display selected checkbox value(s) when user initiates modal again. trying use ng-init value , set checkbox true if has been selected.

modal(attempt 1)

<div class="modal-header">     <h3 class="modal-title">additional collections columns</h3> </div> <div class="modal-body">     <h4>select addional columns list below display in 'collections' list</h4><br/>      <div class="row">     <form name="collectionscolumnsform">         <div class="col-sm-6">             <ul>                 ...                 <li>                     <label class="control c control--checkbox">                         <input type="checkbox" name="phone" ng-model="columns.coll_phone" value="1" ng-init="columns={coll_phone:'{{cookie_coll_phone}}'}">                         phone                         <div class="control__indicator"></div>                     </label>                 </li>                 ...             </ul>         </div>         </form>     </div>     <br> </div>  <div class="modal-footer">     <button class="btn btn-danger" type="button" ng-click="cancel()">cancel</button>     <button class="btn btn-info" type="button" ng-click="save()">save</button> </div> 

---

modal(attempt 2)

<div class="modal-header">     <h3 class="modal-title">additional collections columns</h3> </div> <div class="modal-body">     <h4>select addional columns list below display in 'collections' list</h4><br/>      <div class="row">     <form name="collectionscolumnsform">         <div class="col-sm-6">             <ul>                 ...                 <li>                     <label class="control c control--checkbox">                         <input type="checkbox" name="phone" ng-model="columns.coll_phone" value="1" ng-init="columns={columns.coll_phone:'{{cookie_coll_phone}}'}">                         phone                         <div class="control__indicator"></div>                     </label>                 </li>                 ...             </ul>         </div>         </form>     </div>     <br> </div>  <div class="modal-footer">     <button class="btn btn-danger" type="button" ng-click="cancel()">cancel</button>     <button class="btn btn-info" type="button" ng-click="save()">save</button> </div> 

---

modal(attempt 3)

<div class="modal-header">     <h3 class="modal-title">additional collections columns</h3> </div> <div class="modal-body">     <h4>select addional columns list below display in 'collections' list</h4><br/>      <div class="row">     <form name="collectionscolumnsform">         <div class="col-sm-6">             <ul>                 ...                 <li>                     <label class="control c control--checkbox">                         <input type="checkbox" name="phone" ng-model="columns.coll_phone" value="1" ng-init="columns=cookie_coll_phone">                         phone                         <div class="control__indicator"></div>                     </label>                 </li>                 ...             </ul>         </div>         </form>     </div>     <br> </div>  <div class="modal-footer">     <button class="btn btn-danger" type="button" ng-click="cancel()">cancel</button>     <button class="btn btn-info" type="button" ng-click="save()">save</button> </div> 

in code above, user has option of selecting of 3 options available them. once user selects 1 or more checkboxes value passed angularjs controllers set in cookie. value cookie true whenever checked in browser tools or on view itself.

---

angularjs controller

...  // stored cookie columns collections table ... $scope.cookie_coll_phone = $cookies.get('coll_phone'); ...  // add more columns collections list $scope.collectioncolumns = function() {      var modalinstance = $uibmodal.open({        animation: true,        templateurl: '/js/modals/collection-columns.html',         size: 'md',        resolve:{        },       controller: function ($scope,$uibmodalinstance) {          ...         $scope.cookie_coll_phone = $cookies.get('coll_phone');         ...           $scope.cancel = function () {             $uibmodalinstance.dismiss('cancel');         };          $scope.save = function() {              ...             $cookies.put('coll_phone', $scope.columns.coll_phone);             ...              toaster.pop('success', 'success!', 'additional column(s) have been added.');             location.assign('/collections');             $uibmodalinstance.close();         };        }    });      modalinstance.result.then(function (data) {      },function () {      }); }; ... 

any problem appreciated

i saving checkboxes value localstorage. , in controller checking if there localstorage property. here example 3 checkboxes.

vm.checkedcheckboxes = window.localstorage.checkboxes ? json.parse(window.localstorage.checkboxes) : [false, false, false]; 

after i'm using 'ng-checked' in html.