Angularjs select2 set options selected

Issue

I want to build select list (select2) options when user clicks on html button.

My HTML:

<select id="mySel2" class="form-control" multiple="multiple">
    <option ng-repeat="item in items" ng-selected="item.selected"
            ng-model="item.tag">
      {{item.tag}}
    </option>
</select>

Angular js function code on button click:

var fruits=angular.module("myApp",[]);
fruits.controller('ctrlTags',  function($scope){

  /* I HAVE SET DEFAULT VALUE TO SELECT LIST*/
  /* IT WORKING PERFECT WITH SHOWING SELECTED VALUES*/
    var tagsData = [
      {id:1,tag:'Apple'},
      {id:2,tag:'Banana'},
      {id:3,tag:'Cherry'},
      {id:4,tag:'Cantelope'},
      {id:5,tag:'Grapefruit'},
      {id:6,tag:'Grapes',selected:true},
      {id:7,tag:'Lemon'},
      {id:8,tag:'Lime'},
      {id:9,tag:'Melon',selected:true},
      {id:10,tag:'Orange'},
      {id:11,tag:'Strawberry'},
      {id:11,tag:'Watermelon'}
    ];  

     $scope.items = tagsData;

     /*NOW ON BUTTON CLICK GETKEY() FUNCTION WILL BE CALLED*/
     /* AND I WANT TO RENDER/REFRESH SELECT LIST WITH NEW DATA */
     $scope.getKey=function(data){   
         var newData = [
          {id:4,tag:'car'},
          {id:5,tag:'bat',selected:true},
          {id:6,tag:'cat',selected:true},
          {id:7,tag:'Lemon'},
          {id:8,tag:'Lime'},

        ];
    $scope.items=newData;

    };
}); 

ISSUE:ON BUTTON CLICK IT IS UPDATING SELECT LIST VALUES BUT NOT SHOWING DEFAULT SELECTED VALUES

PLEASE TELL ME HOW TO REFRESH SELECTED VALUE AS WELL.

Solution

You need to add model into select section ng-model=”selected”.
You can add for example first index
in controller $scope.selected = tagsData[0]

Answered By – john51

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0