Finished

app/board.ctrl.js

@@ -3,17 +3,26 @@
 
     angular.module('app').controller('BoardCtrl', Ctrl);
 
-    function Ctrl() {
+    Ctrl.$inject = ['board'];
+
+    function Ctrl(board) {
         var vm = this;
-        vm.toggleAlarm = toggleAlarm;
+        vm.state = {};
 
-        vm.state = { light: false, alarm: false };
+        init();
+        function init() {
+            board.getBoardState().then(function(state) {
+                vm.state = state
+            });
+        }
 
-        function toggleAlarm() {
+        vm.lightSwitchCallback = function(isOn) {
-            vm.state.alarm = !vm.state.alarm;
+            board.setLight(isOn).then(init)
+        }
+
+        vm.alarmSwitchCallback = function(isOn) {
+            board.setAlarm(isOn).then(init)
         }
     }
 
 })();
-
-

app/board.srv.js

@@ -3,24 +3,42 @@
 
     angular.module('app').service('board', Srv);
 
-    Srv.$inject = ['$q'];
+    Srv.$inject = ['$q', '$window'];
 
-    function Srv($q) {
+    function Srv($q, $window) {
 
         this.getBoardState = getBoardState;
         this.setLight = setLight;
         this.setAlarm = setAlarm;
 
         function getBoardState() {
-            return { light: false, alarm: true };
+            return $q.when(getState())
         }
 
+        function getState() {
+            var string = $window.sessionStorage.getItem('BOARD-STATE');
+            return string ? JSON.parse(string) : {};
+        }
+
+        function saveState(state) {
+            var string = JSON.stringify(state);
+            $window.sessionStorage.setItem('BOARD-STATE', string);
+        }
+
+
         function setLight(isOn) {
+            var state = getState();
+            state.light = isOn;
+            saveState(state);
+            return $q.when();
         }
 
         function setAlarm(isOn) {
+            var state = getState();
+            state.alarm = isOn;
+            saveState(state);
+            return $q.when();
         }
-
     }
 
 

app/switch.cmp.js

@@ -4,14 +4,23 @@
     var options = {
         templateUrl: 'app/switch.cmp.html',
         controller: Controller,
-        bindings: {}
+        bindings: {
+            isOn: '<initial',
+            onChange: '<'
+        }
     };
 
     function Controller() {
         this.$onInit = $onInit;
+        this.toggle = toggle;
 
         function $onInit() {
         }
+
+        function toggle() {
+            this.isOn = !this.isOn;
+            this.onChange(this.isOn);
+        }
     }
 
     angular.module('app').component('switch', options);

index.html

@@ -13,7 +13,15 @@
 
     <br><br>
 
-    <a href ng-click="vm.toggleAlarm()">Toggle alarm</a>
+
+    Light:
+    <switch initial="vm.state.light"
+           on-change="vm.lightSwitchCallback"></switch>
+
+    Alarm:
+    <switch initial="vm.state.alarm"
+           on-change="vm.alarmSwitchCallback"></switch>
+
 
 </div>