AngularJS + select2 - How to set initial value

Question

I want to use Select2 in my AngularJS project, So I added an input like this :

<select class="find-neighborhood js-states form-control" 
    ng-model="regionIdentifier" 
    ng-init="">
 </select>

Luckily , Whenever regionIdentifier is change, I find out. Actually I want to set initial value in my Select2 . Here is my javascript code :

$(".find-neighborhood").select2({
    dir: "rtl",
    placeholder: "find neighborhood ...",
    allowClear: true,
    data: $scope.regions
 }); 

My $scope.regions looks like :

[object,object,object]

Each object is like :

0 :Object
 id:52623
 regionSlug:yvuj
 text:yvuj1

How to init value in my select2 ?

Answer 1

You should create a directive to make this work globally and fine. Here is a simple example which let you initialize a select2 set the default option values to your selection. You can find a working version on plnkr . While select2 depends on jQuery you may will look for an other lib to make it work. Some dev's preffer to have no jQuery included in AngularJS projects.

Controller

//option list 
$scope.regions = {
    'test1' : {
        id: 1
    },
    'test2' : {
        id: 2
    },
    'test3' : {
        id: 3
    },
    'test4' : {
        id: 4
    },
    'test5' : {
        id: 5
    }
};

//model & selected value setup
$scope.regionIdentifier = 3;

View

<select class="js-example-basic-single"
        ng-model="regionIdentifier"
        items="regions"
        items-selected="regionIdentifier"
        id="regionSelection"
        select-two>
</select>

Directive

/**
 * Simple select2 directive
 */
angular.module('app').directive('selectTwo', ['$timeout', function($timeout){

    return {
        restrict : 'EA',
        transclude : true,
        terminal: true,
        templateUrl : 'views/directive/select2.html',
        scope: {
            items: "=",
            itemsSelected: "="
        },
        link: function($scope, $element, $attrs, $controller){

            //format options https://select2.github.io/select2/#documentation
            function format(state) {

                //init default state
                var optionTemplate = state.text;
                if (!state.id || state.id == 0) { //option group or no selection item
                    return optionTemplate;
                }

                return optionTemplate;
            }

            //init on load
            $timeout(function(){

                //if multiple options are possible, parse an comma seperated list into itemsSelected like 1,2,5,23,21
                if (angular.isString($scope.itemsSelected) && $scope.itemsSelected.split(',').length > 1) {
                    $scope.itemsSelected = $scope.itemsSelected.split(',');
                }

                $($element[0]).select2({
                    formatResult: format,
                    formatSelection: format,
                    escapeMarkup: function(m) { return m; }
                }).val($scope.itemsSelected == undefined ? [0]: [$scope.itemsSelected]).trigger("change");
            });
        }
    };
}]);

Directive template views/directive/select2.html

<option ng-repeat="(name, item) in items track by $index"
    value="{{ item.id }}">
    {{ name }}
</option>