How do I make ng-model-options use dynamic variables?

I am having an issue where ng-model-options isn't reflecting the changes I need it to. For example, in the snippet below if you enter 4:00 pm into both time inputs you'll see the UTC output is different - the first is 6 and the second is 8. This is expected. However, the issue occurs when I select +0800 using the dropdown. Since this updates the timezone variable, both time inputs should now display 8 when I enter 4:00 pm since the first input should now use the timezone variable (as specified in its ng-model-options). However this isn't happening. Even after I clear the input and re-enter the time manually it still shows the incorrect time. How can I make the timezone option in ng-model-options use a dynamically changing variable such as timezone?

See issue below:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.timezones = ['+1000', '+0800'];
    $scope.timezone = $scope.timezones[0];

    $scope.time = '';
    $scope.eightTime = '';
  });

angular.element(document).ready(() => {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-controller="myController">
  <select ng-model="timezone">
    <option ng-repeat="timezone in timezones" ng-value="timezone"></option>
  </select>
  <p>Selected Timezone: </p>

  <input type="time" ng-model="time" ng-model-options='{timezone: timezone}' />
  <p>Using dropdown T.Z of '': </p>

  <input type="time" ng-model="eightTime" ng-model-options="{timezone: '+0800'}">
  <p>Hardcoded '+0800': </p>
  <!-- ^^^ This should be the output when '+0800' is selected in the dropdown -->
</div>

from How do I make ng-model-options use dynamic variables?