How to set selectize.js value programatically using Angular?

Question

I'm using this AngularJS directive for selectize.js: https://github.com/kbanman/selectize-ng

I have two dropdowns and I want to populate one of them selectizeVat depending on what value is selected in the other selectizeProducts. I have read up on the selectize.js API and found the setValue method but how do I utilize it?

Below is my template and controller code:

Template

<div ng-controller="dropdownController">
  <select selectize="selectizeProducts" options="products" ng-model="product"></select>
  <select selectize="selectizeVAT" options="vats" ng-model="chosenProduct.vat"></select>
</div>

Controller

app.controller('dropdownController', function($scope, $filter) {
  $scope.chosenProduct = '';
  $scope.vats = [
    {'id': 0, 'vat': '25%'},
    {'id': 1, 'vat': '16%'},  
    {'id': 2, 'vat': '6%'},
  ];
  $scope.selectizeProducts = {
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    onChange: function(id) {
      // Get an object from $scope.products by id
      $scope.chosenProduct = $filter('getById')($scope.products, id);
    } 
  };
  $scope.selectizeVat = {
    valueField: 'id',
    labelField: 'vat',
    searchField: 'vat',
  };
});

Also $scope.products looks like this:

{'id': 1, 'name': 'My option', 'nr': 1, 'vat': 0}

and the basic idea is to choose a product and the VAT would be populated automatically in the selectizeVat dropdown.

Thanks!

Answer 1

OK,

So I found the answer to my own problem.

$scope.chosenProduct needs to be defined like so in order to populate VAT:

{'id': 1, 'name': 'My option', 'nr': 1, 'vat': [0]}

Seems like you need to define a dict for seletize in order for it to populate your <select>.