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

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

  <body>
    <div ng-controller="MainController">
      <h3>To create the cookie, click this button.</h3>
      <br />
      <input type="button" ng-click="GenCookie()" value="Generate Cookie" />
      <br />
      <h3>To read the cookie, click this button.</h3>
      <br />
      <input type="button" ng-click="ReadCookie()" value="Read Cookie" />
      <br />
      <label>CookieVal : {{cookieVal}}</label>
    </div>
  </body>

</html>

// Code goes here

var myAppModule = angular.module('myApp', ["ngCookies"]);

myAppModule.controller('MainController', ['$scope','$cookies', function($scope,$cookies) {

  this.scope = $scope;
  $scope.cookieVal = null;

  $scope.GenCookie = function() {
    //document.cookie = "JSESSIONID=JohnDoe; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/";
    $cookies.put("JSESSIONID", "JohnDoe");
  };
  
  $scope.ReadCookie = function() {
    $scope.cookieVal = $cookies.get("JSESSIONID");
  };
}]);
/* Styles go here */