Despite my attempts, I am struggling to set the default option for a select element using AngularJS.
My Technologies: AngularJS, Angular-UI-router, Bootstrap
Key HTML snippet:
<select ng-model="selectedCompany" ng-options="c.name for c in companies" class="form-control"></select>
Juice Service Details:
vapelog.factory('Juices', function($http, $q){
var Juices = {
get : function() {
var promise = $http.get('/juices').then(function(data){
return data.data;
});
return promise;
},
show : function(id) {
var deferred = $q.defer();
$http.get('/juices/'+id).then( function ( juice ) {
$http.get('/companies').then( function ( companies ) {
juice.companies = companies;
deferred.resolve( juice );
}, function getAcctError() { deferred.reject(); });
}, function getUserError() { deferred.reject(); });
return deferred.promise;
},
}
return Juices;
});
Controller Setup:
vapelog.controller('JuiceDetailCtrl', ['$scope','$stateParams','Juices',function($scope, $stateParams, Juices) {
var id = $stateParams.juice;
$scope.juice = {};
$scope.selectedCompany = {};
Juices.show(id).then(function(juice){
$scope.juice = juice.data;
$scope.companies = juice.companies.data;
$scope.reviews = $scope.juice.reviews;
$scope.selectedCompany = $scope.juice.company;
}, function(){
console.log('error');
});
$scope.tfIcon = function(item){
if(item == "1"){
return 'glyphicon-ok';
} else {
return 'glyphicon-remove';
}
}
}]);
While the select box displays all items correctly, it fails to pre-select an option. Instead, it starts with a blank value.
The presence of $scope.companies leads me to believe that the $http.get() call has been successful and $scope.selectedCompany should also be populated. However, this is not the case. Any insights on where I might be going wrong would be appreciated.