Based on information from the official documentation:
The ngModelOptions expression is evaluated only once during the linking of the directive; it is not continuously monitored for changes. However, it is still possible to customize the options for a single ngModel.NgModelController instance by utilizing
NgModelController#$overrideModelOptions()
To ensure it works for you, I made some adjustments to the code :)
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.timezones = ['+1000', '+0800'];
$scope.timezone = $scope.timezones[0];
$scope.time = '';
$scope.eightTime = '';
$scope.$watch('timezone',function(v){
$scope.time = '';
$scope.myForm.time.$overrideModelOptions({'timezone': $scope.timezone});
// this will update the options whenever the timezone is changed.
})
});
angular.element(document).ready(() => {
angular.bootstrap(document, ['myApp']);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="myController">
<form name="myForm">
<select ng-model="timezone" ng-options="timezone for timezone in timezones">
</select> <!-- ng-options is the correct way to provide options to the select dropdown -->
<p>Selected Timezone: {{timezone}}</p>
<input type="time" name="time" ng-model="time" ng-model-options='{timezone: timezone}' />
<p>Using dropdown T.Z of '{{timezone}}': {{time.getUTCHours()}}</p>
<input type="time" ng-model="eightTime" ng-model-options="{timezone: '+0800'}">
<p>Hardcoded '+0800': {{eightTime.getUTCHours()}}</p>
<!-- ^^^ This should be the output when '+0800' is selected in the dropdown -->
</form>
</div>
For more information on $overrideModelOptions, visit - https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$overrideModelOptions
Update:
You can achieve this by creating a separate directive.
**For versions >1.6.2 **
angular.module('myApp', ['kcd.directives'])
.controller('myController', function($scope) {
$scope.timezones = ['+1000', '+0800'];
$scope.timezone = $scope.timezones[0];
$scope.time = '';
$scope.eightTime = '';
});
angular.module('kcd.directives', []).directive('kcdRecompile', ['$parse', function($parse) {
'use strict';
return {
transclude: true,
link: function link(scope, $el, attrs, ctrls, transclude) {
var previousElements;
compile();
function compile() {
transclude(scope, function(clone, clonedScope) {
previousElements = clone;
$el.append(clone);
});
}
function recompile() {
if (previousElements) {
previousElements.remove();
previousElements = null;
$el.empty();
}
compile();
}
scope.$watch(attrs.kcdRecompile, function(_new, _old) {
var useBoolean = attrs.hasOwnProperty('useBoolean');
if ((useBoolean && (!_new || _new === 'false')) || (!useBoolean && (!_new || _new === _old))) {
return;
}
if (useBoolean) {
$parse(attrs.kcdRecompile).assign(scope, false);
}
recompile();
}, typeof $parse(attrs.kcdRecompile)(scope) === 'object');
}
};
}]);
angular.element(document).ready(() => {
angular.bootstrap(document, ['myApp']);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<div ng-controller="myController">
<div kcd-recompile="timezone">
<select ng-model="timezone" ng-options="timezone for timezone in timezones">
</select> <!-- ng-options is the correct way to provide options to the select dropdown -->
<p>Selected Timezone: {{timezone}}</p>
<input type="time" name="time" ng-model="time" ng-model-options="{timezone: timezone}"/>
<p>Using dropdown T.Z of '{{timezone}}': {{time.getUTCHours()}}</p>
<input type="time" ng-model="eightTime" ng-model-options="{timezone: '+0800'}">
<p>Hardcoded '+0800': {{eightTime.getUTCHours()}}</p>
<!-- ^^^ This should be the output when '+0800' is selected in the dropdown -->
</div>
</div>
Related Post - Dynamically Setting ngModelOptions in Angular