Currently utilizing Angular JS and Bootstrap, I have a query regarding updating the input for a datepicker calendar and a select from a function.
The values are being successfully updated, however, they do not reflect on their respective inputs.
It seems like I am updating the model but failing to update the view. Updating the model from the view works perfectly, but not vice versa.
In an interesting turn of events, if I update a checkbox by clicking ... Surprise! The select and the datepicker calendar get updated.
How can I update the view from my model and ensure this update is visible?
Edit 1:
HTML
<select ng-model = "searchPAI.sistemaSelected" class="form-control" ng-options="sistema.nombreSistema for sistema in listSistemas">
</select>
<p class = "input-group" ng-controller = "dpFechaDesde">
<input type = "text" class = "form-control" uib-datepicker-popup = "{{format}}" name = "dtInicio" ng-model = "dateFrom" is-open = "popup1.opened" ng-change = "change2()"
min-date = "minDate" max-date = "maxDate" datepicker-options = "dateOptions" close-text = "Cerrar" clear-text = "Borrar" now-text = "Hoy" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
JS:
$scope.searchPAI.sistemaSelected = $scope.listSistemas[id];
$scope.$on("updateFechaDesde", function(){
$scope.dateFrom = publicDPFactory.date;
MyVar.data.dtFrom = publicDPFactory.date;
console.log("publicDPFactory.date: " + publicDPFactory.date);
console.log("scope.dateFrom: " + $scope.dateFrom);
});
I must highlight that everything functions correctly when updating the model from the view.
Edit 2:
Here's another surprise! As previously mentioned, I update the value from the model but cannot see these changes reflected in the view.
https://i.stack.imgur.com/oSzXx.png
However, with a simple click on "SI" ... Surprise!!! Suddenly, the updated values are visible on the view. You can observe the select and the datepicker now reflecting the updates.