Real time model update using local storage

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

<head>
  <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MaintCtrl as m">
  <h1>{{m.greeting}}</h1>
  <h2>Current LocalStorage value is = <em>{{m.latestData()}}</em></h2>
  <input type="text" ng-model="m.value">
  <input type="button" value="update" ng-click="m.update(m.value)">
</body>

</html>


app = angular.module "app", []

app.controller "MaintCtrl", (LS)->
  @greeting = "This is a local storage demo"
  @value = LS.getData()
  @latestData = ->
    return LS.getData()
  @update = (val)->
    LS.setData(val)
  return

app.factory "LS", ($window,$rootScope)->
    angular.element($window).on 'storage', (event)->
      if event.key is 'my-storage' then $rootScope.$apply()
      return
    setData: (val)->
      $window.localStorage && $window.localStorage.setItem('my-storage', val)
      return @
    getData: ->
      return $window.localStorage && $window.localStorage.getItem('my-storage')

/* Styles go here */