I was searched as much I can but I did not get a solution for this.
I using select2 with multi-select and dynamic tags, but on load, I want to load some default values, but it only displays the first value of array, here my code is
HTML
<body class="scania app">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script src="app.js"></script>
<div class="container-fluid main-content" ng-app="myApp">
<div class="panel panel-default sc-select2">
<div class="container" ng-controller="myCtrl">
<h2>Multi select</h2>
<div class="container">
<select style="width: 300px" multiple="multiple" class="full-width" ui-select2="fileTypeList" ng-model="selectedItemsForMultiTokken" data-placeholder="Select file type" >
<option ng-repeat="item in items" value="{{item}}">{{item}}</option>
</select>
</div>
</div>
</div>
</div>
</body>
ANGULAR JS
var app = angular.module("myApp", ['ui']);
app.controller("myCtrl", function($scope) {
$scope.selectedItemsForMultiTokken = ["jpeg","ppt","mp3"];
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.items = ["jpeg", "jpg", "png", "gif", "mkv", "mp3", "mp4", "mpeg", "pdf", "zip", "exe", "doc", "ppt"];
$scope.fileTypeList = {
'multiple': true,
'tags':true,
'formatSearching': 'Searching for file type',
'formatNoMatches': 'No file type found'
};
});