Selectpicker doesn't fill when using with AngularJS - angularjs

Question

I'm trying to fill a select options (selectpicker), but without success. My competenceArray is filled correctly, but in my HTML never appears the options.
Someone can help me with the selectpicker ?
JS
(() => {
angular
.module('talent')
.controller('FunctionalityCreateCtrl', Create);
function Create($timeout, GatewayService) {
const vm = this;
vm.form = {};
vm.competencesArray = [];
getCompetences();
function getCompetences() {
GatewayService.get('/competences')
.then((data) => {
vm.competencesArray = data._embedded;
})
.catch(() => {
console.log('nope');
});
}
}
})();
HTML
<select
class="selectpicker"
data-style="select-with-transition"
title="Select a value"
data-size="7"
ng-model="functionality.form.comp"
ng-options="s.name for s in functionality.competencesArray">
<option value=""> Select</option>
<select>

Answer 1

You should refresh select picker after complete ajax request . From the docs :
To programmatically update a select with JavaScript, first manipulate
the select, then use the refresh method to update the UI to match the
new state. This is necessary when removing or adding options, or when
disabling/enabling a select via JavaScript.
When complete ajax request , you need refresh select , and put it in $timeout for angular re-render dom . Here is example :
function getCompetences() {
GatewayService.get('/competences')
.then((data) => {
vm.competencesArray = data._embedded;
$timeout(function(){
$('.selectpicker').selectpicker('refresh'); //put it in timeout for run digest cycle
},1)
})
.catch(() => {
console.log('nope');
});
}
Hope it help

Answer 2

You haven't posted the full context of your code so I'm assuming that you have defined the angular module "talent" and that the element is within the scope of the FunctionalityCreateCtrl. I have wrapped your example HTML in a div with ng-app and ng-controller attributes just so the example is functional.
The first error I see in the code example you posted is the element is not closed properly. The close tag is missing a forward slash: </select>.
The other error is you are setting the model of the select element to be form.comp but form.comp doesn't seem to be set to anything. I've added it in the code example below.
Also notice that I've added an id to the ng-options expression ng-options="s.id as s.name for s in functionality.competencesArray"> This is just so I can set the model (form.comp) to a value I know. Your data may be different.
Working html snippet:
<div ng-app="talent" ng-controller="FunctionalityCreateCtrl as functionality">
<select
class="selectpicker"
data-style="select-with-transition"
title="Select a value"
data-size="7"
ng-model="functionality.form.comp"
ng-options="s.id as s.name for s in functionality.competencesArray">
<option value=""> Select</option>
</select>
</div>
Working Javascript snippet (I've added the talent module definition and removed the api call just so the example is functional):
(() => {
angular.module('talent', []);
angular
.module('talent')
.controller('FunctionalityCreateCtrl', Create);
function Create() {
const vm = this;
vm.form = {};
vm.competencesArray = [];
getCompetences();
function getCompetences() {
vm.competencesArray = [
{ id: 1, name: 'test 1' },
{ id: 2, name: 'test 2' },
{ id: 3, name: 'test 3' }
];
vm.form.comp = 1;
}
}
})();
Here is a working JSFiddle using your example code: https://jsfiddle.net/g8r9ajtL/