Issue with pre-populating angular-ui's select2 - angularjs

Question

I have an issue with angular-ui/select2 control.
I would like to use angularjs to pre-populate the control with an array of objects. I use the init function in order to try and achieve this but somehow, the view does not get updated on the page...
Here the client module:
angular.module('searchEngineModule', ['ng', 'languageChooserModule','geolocationModule','currentMemberAddressModule', 'addressAutocompleteModule'])
.factory('searchEngineService', function(){
})
.controller('searchEngineCtrl', [ '$scope', '$http', 'languageChooserService', 'retrieveDefaultLanguagesService', 'geolocationService', 'currentMemberAddressService', 'addressAutocompleteService','addressFromReferenceService', function geolocationCtrl($scope, $http, languageChooserService, retrieveDefaultLanguagesService, geolocationService, currentMemberAddressService, addressAutocompleteService, addressFromReferenceService) {
$scope.searchCriteria = {};
$scope.languageChooser = languageChooserService;
$scope.addressAutocomplete = addressAutocompleteService;
$scope.init = function() {
retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
$scope.searchCriteria.languages = [{}];
$scope.searchCriteria.languages= languages;//HERE: it does populate the model but the view is not updated...
});
geolocationService.geolocationAddress().then(function(address) {
$scope.geolocationAddress = {};
$scope.geolocationAddress = address;
});
currentMemberAddressService.currentMemberAddress().then(function(address){
$scope.currentMemberAddress = {};
$scope.currentMemberAddress = address;
});
};
$scope.$watch('addressAutocomplete', function (newVal, oldVal) {
if (oldVal == newVal) return;
$scope.onTheFlyAddress = {};
if(newVal){
addressFromReferenceService.addressFromReference(newVal.reference).then(function(address){
$scope.onTheFlyAddress = address;
});
}
}, true);
$scope.performSearch = function(){
console.log('performSearch');
console.log($scope.searchCriteria);
};
}])
.config(function($httpProvider) {
$httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
$httpProvider.defaults.headers.common['X-Ajax'] = 'true';
});
Here is the languageChooserModule:
angular.module('languageChooserModule', ['ng', 'ui.select2'])
.factory('languageChooserService', function(){
return select2Options();
})
.factory('retrieveDefaultLanguagesService', ['$http', '$q', function($http, $q){
function retrieveDefaultLanguagesP(){
var deferred = $q.defer();
var defaultLanguages = [{}];
$http.get('/bignibou/utils/findLanguagesByLanguageStartingWith.json', {params:{language: 'fran'}})
.success(function(languages){
defaultLanguages = languages;
deferred.resolve(defaultLanguages);
});
return deferred.promise;
}
return{
defaultLanguages: function(){
return retrieveDefaultLanguagesP();
}
};
}]);
function select2Options(){
function format(item) {
return item.description;
}
return {
simple_tags: false,
multiple : true,
contentType: "application/json; charset=utf-8",
minimumInputLength : 3,
data:{ text: "description" },
formatSelection: format,
formatResult: format,
ajax : {
url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
dataType : 'json',
data : function(term) {
return {
language : term
};
},
results : function(data, page) {
return {
results :
data.map(function(item) {
return {
id : item.id,
description : item.description,
version : item.version
};
}
)};
}
}
};
}
Can anyone please help?
edit 1:
Chaging to the following:
retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
$scope.searchCriteria.languages = [{}];
$scope.searchCriteria.languages= languages;
$scope.$digest();
});
Causes the following Error:
Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.2.1/$rootScope/inprog?p0=%24digest
at http://localhost:8080/bignibou/js/libs/angular.js:78:12
at beginPhase (http://localhost:8080/bignibou/js/libs/angular.js:11878:15)
at Scope.$digest (http://localhost:8080/bignibou/js/libs/angular.js:11412:9)
at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
at http://localhost:8080/bignibou/js/custom/searchEngineModule.js:18:12
at wrappedCallback (http://localhost:8080/bignibou/js/libs/angular.js:10597:81)
at http://localhost:8080/bignibou/js/libs/angular.js:10683:26
at Scope.$eval (http://localhost:8080/bignibou/js/libs/angular.js:11576:28)
at Scope.$digest (http://localhost:8080/bignibou/js/libs/angular.js:11421:31)
at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
edit 2:
Changing to the following:
$scope.$apply(function(){
retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
$scope.searchCriteria.languages= languages;
});
});
causes the following error:
Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.2.1/$rootScope/inprog?p0=%24apply
at http://localhost:8080/bignibou/js/libs/angular.js:78:12
at beginPhase (http://localhost:8080/bignibou/js/libs/angular.js:11878:15)
at Scope.$apply (http://localhost:8080/bignibou/js/libs/angular.js:11675:11)
at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
at Scope.$scope.init (http://localhost:8080/bignibou/js/custom/searchEngineModule.js:17:11)
at http://localhost:8080/bignibou/js/libs/angular.js:9885:21
at Scope.$eval (http://localhost:8080/bignibou/js/libs/angular.js:11576:28)
at pre (http://localhost:8080/bignibou/js/libs/angular.js:18210:15)
at nodeLinkFn (http://localhost:8080/bignibou/js/libs/angular.js:6104:13)
at compositeLinkFn (http://localhost:8080/bignibou/js/libs/angular.js:5536:15)

Answer 1

If your return value from retrieveDefaultLanguagesService.defaultLanguages() is a $q.defer().promise then (ha!) then will cause a digest to occur and therefore $apply, so your edits are redundant. If you need to do that in the future (usually rare) you should do it this way:
if(!rootScope.$$phase)rootScope.$apply();
To reduce some complexity I would also suggest removing the initialization of searchCriteria and initializing your object structure within your then success callback. Like this:
retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
$scope.searchCriteria = {languages:languages};
});
If that doesn't work I might guess that your html is incorrect in some way. if you share it you might find more help.
I'm also using angluarjs 1.2.3 and ui-select2 with no issues

Answer 2

I forgot to mention that I use angular 1.2.1 and according to this post: (https://stackoverflow.com/a/20186141/536299) there appears to be an incompatibility between angular js 1.2 and angular ui select2....