I'm diving into the world of AngularJS and facing a challenge with setting a default value on a select box. I've successfully listed objects in the select box and binding it to the model works seamlessly. However, as soon as I introduce a default value, my bindings refuse to update for some mysterious reason.
Controller:
app.controller('ctrl', [ '$scope', function ctrl($scope){
api.get('dealerships', function(err, dealerships){
$scope.dealerships = dealerships;
$scope.$apply();
});
});
HTML:
<select ng-model="dealership" ng-options="d.name for d in dealerships"></select>
<span class="dealership-name">{{dealership.name}}</span>
Everything functions smoothly here - switching between dealerships updates the dealership.name accordingly. But once I assign a default value like this:
app.controller('ctrl', [ '$scope', function ctrl($scope){
api.get('dealerships', function(err, dealerships){
$scope.dealerships = dealerships;
$scope.dealership = $scope.dealerships[0];
$scope.$apply();
});
});
All my bindings with dealership stubbornly remain stuck at dealerships[0].
For a visual representation, refer to the image:
If anyone has any insights or solutions, please share them. Your help is greatly appreciated.