select2 values not changing on angular model changed

Question

i am unable to change selected values inside select2 in my controller.

<select id="drptabselect" ng-model="selectedTab" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>

i have ajax call where data.Tab returning as follow

$scope.selectedTab = data.Tab;

ajax tab result as below

"Tab": {
"$id": "2",
"ID": 4,
"Title": "FirstTab"
},

if i try to print the

<span>{{selectedTab}}</span>

it gives expected value after assignmnet as

{"$id": "2","ID": "4","Title": "FirstTab"}

Unfortunatly the same not applied to select2 dropdown. there it still shows last selected value. How can populate the value in dropdown box too?

my $scope.tabnames looks like this

[{"$id": "1",
"ID": 4,
"Title": "FirstTab"
},
{"$id": "2",
"ID": 5,
"Title": "Secondtab"
},
{"$id": "3",
"ID": 6,
"Title": "Thirdtab"
}]

i am using regular select2 library (not angualr-ui)

https://plnkr.co/edit/pJQBfQQ5cA9msc6fXErp here select2 is not working but same issue is there for select hope if this can be fixed, it will give answer to my solution.. basically populating select value inside controller — user3815413, Nov 23 '16 at 15:40
My select2 was inside controller, icant see any solution in ur code — user3815413, Nov 26 '16 at 06:05

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

One of Angular JS gotchas when working with ngModel is to use dot notation by going further one level (see also this explanation). Try :

$scope.controllerData.selectedTab = data.Tab;
$scope.controllerData.tabnames = ...

controllerData is just an arbitrary name, you may choose whatever fits your need.

Also, is there a particular reason for tabnames to be an array with a single entry and containing objects?

edited May 23 '17 at 12:32

Community

1
1

answered Nov 23 '16 at 10:54

Christian Bonato

1,253
11
26

HI Christian Bonato, Thanks for your hint, Can you please elaborate on controllerData? My identifier selectedTab is declare dat root level as $scope.selectedTab =[] about why tabnames is array, This is how ajax responce, in that rest of text input controlls data update works perfectly fine with statements like $scope.Title = data.Title; only problem is for select2 dropdown, { "Title": "Usersname", "ControlName": "txtUsersname", "Tab": { "$id": "3", "ID": 4, "Title": "FirstTab" }, } – user3815413 Nov 23 '16 at 11:12
here select2 is not working but same issue is there for select hope if this can be fixed, it will give answer to my solution.. basically populating select value inside controller – – user3815413 Nov 23 '16 at 15:43
plunker is here : plnkr.co/edit/pJQBfQQ5cA9msc6fXErp – user3815413 Nov 24 '16 at 09:37

score 0 · Answer 2 · answered Nov 24 '16 at 06:04

You were having the select2 tab outside the controller defination, i think that is the problem.

<!DOCTYPE html>
<html>

  <head>
   <link data-require="select2@4.0.0" data-semver="4.0.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />

    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="angular.min.js"></script>
    <script src="script.js"></script>
    <script src="select2.full.js"></script>


  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div>
{{message}}
                  <br />
      <select id="drptabselect" ng-model="selectedTab" class="form-control select2" ng-options="x.Title for x in tabnames"></select>
    </div>
      <input type="button" ng-click="setselect()" value="set select2">
  </body>



 {{selectedTab}}

</html>

select2 values not changing on angular model changed

2 Answers2