I would recommend creating a service that wraps localStorage or another apis to store persistent data. Here is an example of using localStorage .
This implementation is synchronous , but if I use websql like or even a db server, then I would reorganize it to use promises to return a storage object.
controller
var demo = angular.module('demo', [ 'appStorage' ]); demo.controller('AppStorageController', [ '$scope', 'appStorage', function($scope, appStorage) { appStorage('MyAppStorage', 'myAppStorage', $scope); } ]);
HTML
<div ng-controller="AppStorageController"> <p>Local Storage: {{myAppStorage}}</p> <p> Username: <input type="text" ng-model="myAppStorage.username"></input> </p> <p> Remember me: <input type="checkbox" ng-model="myAppStorage.rememberMe"></input> </p> </div>
Js
angular.module('appStorage', []).factory('appStorage', [ '$window', function($window) { var appStorages = {}; var api = undefined; if ($window.localStorage) { api = { set : function(name, value) { $window.localStorage.setItem(name, JSON.stringify(value)); }, get : function(name) { var str = $window.localStorage.getItem(name); var val = {}; try { val = str ? JSON.parse(str) : {}; } catch (e) { console.log('Parse error for localStorage ' + name); } return val; }, clear : function() { $window.localStorage.clear(); } }; } // possibly support other if (!api) { throw new Error('Could not find suitable storage'); } return function(appName, property, scope) { if (appName === undefined) { throw new Error('appName is required'); } var appStorage = appStorages[appName]; var update = function() { api.set(appName, appStorage); }; var clear = function() { api.clear(appName); }; if (!appStorage) { appStorage = api.get(appName); appStorages[appName] = appStorage; update(); } var bind = function(property, scope) { scope[property] = appStorage; scope.$watch(property, function() { update(); }, true); }; if (property !== undefined && scope !== undefined) { bind(property, scope); } return { get : function(name) { return appStorage[name]; }, set : function(name, value) { appStorage[name] = value; update(); }, clear : clear }; }; } ]);