Issue with pre-populating angular-ui's select2
angular-ui, angularjs, angularjs-select2
Solution
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
Problem
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) ```