AngularJS set values of multi-select drop-down using selectize and ng-repeat

Question

With this example ( JS Bin of pure html select tag ) I can able to achieve the pure html select multiple.

But I am using the selectize plugin
https://selectize.github.io/selectize.js/
for dropdown multi-select and i am confused how to populate the already selected values.?

This is what i tried My HTML:

<div ng-repeat="item in items">

<select  
multiple 
class="selectSkill"
ng-model="item.storedArray"
ng-options="opt.skillId as opt.skillName for opt in skills"
></select>

</div>

My Client:

$scope.$selectSkill= $('.selectSkill').selectize({
    valueField: 'skillId',
    labelField: 'skillName',
    searchField: 'skillName',
    maxItems: 5,
    placeholder:"Select Skill",
    options: $scope.skills,
    create: false,
    sortField: {
        field: 'skillName',
        direction: 'asc'
    }
});
$scope.selectizeControlSkills = $scope.$selectSkill[0].selectize; 

I am loading selectize with class-based(selectSkill).

Without populate normal load is working but I'm trying to set values using selectize dynamically.

help is appriciated thank you.

My Demo data:

**$scope.skills**

**item.storedArray**

Answer 1

Posting the example I created as an answer because it appeared to help the OP.

The advice here is to not mix the use of Selectize with ng-model and ng-options because they conflict with each other in functionality if applied to the same select element.

If you want to use Selectize, it's best to create a wrapper (i.e. a directive, as in my example) that provides the initialisation on select elements that need it.

Also, don't forget that since Selectize causes data changes outside the context of AngularJS, you'll need to manually trigger digests (i.e. scope.$apply()) to ensure code inside AngularJS sees the latest data.

angular
  .module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.items = [
      { storedArray: ['078...'] },
      { storedArray: [] },
      { storedArray: ['0cc...'] },
    ];
    $scope.skills = [
      { skillId: '078...', skillName: 'Java' },
      { skillId: '0cc...', skillName: 'Cisco UCS' },
    ];
    $scope.itemSelectizeOptions = $scope.items.map(function (item) {
      return {
        valueField: 'skillId',
        labelField: 'skillName',
        options: $scope.skills,
        items: item.storedArray,
        onChange: function (newItems) {
          item.storedArray = newItems;
          // `$apply()` needed because change occurs outside of AngularJS's knowledge
          $scope.$apply();
        }
      };
    })
  })
  .directive('selectize', function () {
    return {
      scope: {
        selectize: '<',
      },
      link: function (scope, el) {
        var selectize = $(el).selectize(scope.selectize);
      },
    };
  });

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="options in itemSelectizeOptions">
    <select
      multiple
      selectize="options"></select>
  </div>
  <pre>{{ items | json }}</pre>
</div>