Wijmo 5 - AngularJS directives

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Hello Wijmo 5 and AngularJS!</h1>
<div>
  <wj-popup control="thePopup" hide-trigger="Code">
      <wj-input-date value="data.myDateUtc" is-required="true"></wj-input-date><br><br>
      <wj-input-mask value="data.stringData"></wj-input-mask><br><br>
      <wj-input-number value="data.numberData">s</wj-input-number><br><br>
      <button class="wj-hide-ok">
      OK
      </button>
      <button class="wj-hide-cancel">
      Cancel
      </button>
  </wj-popup>
  <button ng-click="showPopup(e)">
  Show
  </button>
</div>

</div>

CSS

.wj-popup {
    padding: 20px;
}

body {
    margin: 30px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

	$scope.thePopup = null;

	function toDate(value) {
		if (typeof value == 'string' || typeof value == 'number') return new Date(value);
		if (value instanceof Date) return new Date(value.valueOf());
		return null;
	}
	function defineUtcDateProperty(o, name) {
		o[name] = toDate(o[name]);
		var utcName = "_" + name + "Utc"; // backing field
		var getUtc = (o) => {
			var d = o[name];
			if (d) {
				if (!(o[utcName] instanceof Date)) { // backing field not set yet - set it now
					d = new Date(d.valueOf());
					d.setMinutes(d.getMinutes() + d.getTimezoneOffset());
					o[utcName] = d;
				}
				return o[utcName];
			}
			return d;
		}
		var setUtc = (o, d) => {
			if (o[utcName] == d) return;
			if (o[utcName] && d && o[utcName].valueOf() == d.valueOf()) return;

			o[utcName] = d;
			if (d) {
				d = new Date(d.valueOf());
				d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
			}
			o[name] = d;
		}
    Object.defineProperty(o, name + 'Utc', {
			get: () => getUtc(o),
			set: value => setUtc(o, value),
			enumerable: true,
			configurable: true
		});
	}
  
  $scope.data = {
  	myDate: new Date(), // when this is 'today', I can't type a new value into the control
    stringData: 'This is a string',
    numberData: 12334
  };
  
  var dataSnap = null;

	defineUtcDateProperty($scope.data, 'myDate');
    
    $scope.showPopup = function(e) {
    	dataSnap = angular.copy($scope.data);
    	$scope.thePopup.show(true, pp => {
        	if(pp.dialogResult == 'wj-hide-cancel') {
            	if(dataSnap != null) {
                	$scope.data = angular.copy(dataSnap);
                }
            }
        });
    }
});