I am attempting to configure the options for the angular-datepicker, which is utilizing pickadate, by fetching data from a web-api call.
Here is my current code:
<label for="datepicker">Date:</label>
<input type="text" id="datepicker" pick-a-date="date" pick-a-date-options="dpoptions" placeholder="Select date" />
This is my JavaScript file:
var ServiceBasePath = "http://localhost:29050/api/";
var app = angular.module('myproj', ['angular-datepicker', 'ngTouch']);
app.controller('mycontroller', function ($scope, $http) {
$scope.dpoptions = {
format: 'ddd, dd-mm-yyyy',
min: new Date(),
max: _max
}
$http.get(ServiceBasePath + 'settings/1').
success(function (data) {
_max = data.MaxDays;
$scope.config.duration = data.Duration;
});
}
When I define the value of _max initially and exclude the service results, everything works smoothly. It seems that the issue lies in the fact that the service response is not received before the datepicker initializes, although it functions fine for another field (not related to the datepicker):
<label>Duration (in minutes):</label>
<input type="number" id="duration" ng-model="duration" min="{{config.duration}}" />
Is there a way to ensure the datepicker settings are loaded from the $http.get results?