Angular UI datepicker with custom time zone

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-app="DatePickerWrapper" ng-controller="DateWrapperController">
      <p>{{dateValue}}</p>
      <popup-date-picker id="thisThing" value="dateValue"></popup-date-picker>
      <br />
      <button ng-click="recalculateUtc()">Calculate UTC</button>
    </div>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script data-require="moment.js@*" data-semver="2.8.3" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
    <script data-require="moment-timezone-with-data@*" data-semver="0.2.5" src="http://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

var currentApp = angular.module('DatePickerWrapper', ['ui.bootstrap']);

currentApp.controller('DateWrapperController', ['$scope', function($scope) {
    var userProfile = {
        offset: -600,
        name: 'Australia/Brisbane'
    };

    var calculateProfileWithMoment = function () {
        var utcNow = new Date().toISOString();
        var momentNow = moment(utcNow);

        var profileNow = momentNow.tz(userProfile.name);

        console.log('Profile Now: ' + profileNow);

        return profileNow.format();
    }

    $scope.dateValue = calculateProfileWithMoment();

    $scope.recalculateUtc = function () {
        alert(new Date($scope.dateValue).toISOString());
    }

    $scope.minDate = new Date(2014, 10, 15).toISOString();
    $scope.maxDate = new Date(2015, 2, 20).toISOString();
}]);


currentApp.directive('popupDatePicker', [function () {

    var buildTemplate = function () {
        return '<div class="input-group date-only-sm country-filter no-active-disabled"><input id="{{id}}" readonly="readonly" datepicker-popup="dd/MM/yyyy" date-format="dd/MM/yyyy" date-type="date" ng-click="open($event)" type="text" class="form-control clickable" ng-model="value" is-open="opened" show-button-bar="false" datepicker-options="datePickerOptions" /><div class="input-group-addon clickable" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></div></div>';
    };

    return {
        scope: {
            id: '@',
            value: '='
        },
        controller: 'PopupDatePickerController',
        template: buildTemplate(),
        replace: false
    };
}]);

currentApp.controller('PopupDatePickerController', ['$scope', function ($scope) {
    $scope.opened = false;

    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.datePickerOptions = {
        startingDay: 1,
        showWeeks: false,
        maxMode: 'day'
    };
}]);

/* Styles go here */