AngularJS 1.5.x Definition of a LocalStorage factory, and using HTML5 LocalStorage to store and restore values. Way better than cookies.

var app = angular.module('plunker', []);

app.factory('LocalStorage', function() {
  return {
    put: function(k,v) {
      localStorage.setItem(k,v);
    },
    putObject: function(k,o) {
      localStorage.setItem(k,angular.toJson(o));
    },
    get: function(k) {
      return localStorage.getItem(k);
    },
    getObject: function(k) {
      return angular.fromJson(localStorage.getItem(k));
    }
  }
});

app.controller('MainCtrl', ['$scope','LocalStorage',function($scope,LocalStorage) {

  LocalStorage.putObject('$scope',$scope);
  $scope.$watch("name", function(value){
    
  });
}]);

app.service('mainService', function() {
  var value = true;
  
  var setValue = function(boolean) {
    value = boolean;
  }
  var getValue = function() {
    return value;
  }
  return {
    getValue: getValue,
    setValue: setValue
  };
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <label>Text for Storage: </label><input ng-model="name" >
    <p ng-class="">Obtained from the 'name' storage: <b>{{name}}</b></p>
    <p>After refresing this page, the value will be kep the same.</p>
  </body>

</html>

/* Put your css in here */