Kendo DropdownList and ng-model doesn't work

Question

I have a Kendo Dropdownlist bound to an ObservableArray/DataSource. It duly fills the values from array. But when I bind ng-model to a property, the dropdownlist fails to select the value.

HTML:

<select kendo-drop-down-list k-options="dropOptions" ng-model="user.id"></select>

JS:

var users = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B' },
  { id: 3, name: 'C' },
  { id: 4, name: 'D' },
  { id: 5, name: 'E' },
  { id: 6, name: 'F' }
];

var usersDataSource = new kendo.data.ObservableArray(users);

$scope.dropOptions = {
  dataSource: usersDataSource,
  dataTextField: 'name',
  dataValueField: 'id',
  optionLabel: "Select one..."
};

$scope.welcome = "World";
$scope.user = { id: 3 }

$scope.user = { id: 3 } should force dropdownlist to select C.

Here is link to Plunkr: http://plnkr.co/edit/BxTqWet5sz725ZtKEKJr?p=preview

How can I for dropdownlist to make selection based on value assigned in property bound with ng-model. I have used k-ng-model as well, but it doesn't work. Please help me what am I doing wrong here. Thank you.

Edit: The selection in dropdownlist is not hardcoded. It will be fetched from database.

Answer 1

I was using Angular 1.4.9 with Kendo v2015.3.1111. Downgrading to Angular 1.4.8 made it work.

Answer 2

There is a wierd situation where when I declare the ng-model as an object for example $scope.abc.xyz = "test" ,the bind works whereas if I do $scope.abc = "test" , the bind does not work. Not sure what the issue is :)

Answer 3

<div ng-controller="AppCtrl">
  <h1>Hello {{ welcome }}!</h1>
  <div>Selected value is {{ user.id }}</div>
  <select kendo-drop-down-list 
          k-options="dropOptions"
          ng-model="user.id"
          value= 3
          class="glow"></select>
</div>

Answer 4

Kendo dropdown value does not reflect selection based on ng-model. Instead it provides a new attribute : k-ng-model

For a basic example, have a look at this: k-ng-model

Answer 5

If anyone facing the same problem. Try add k-value-primative="true" to dropdown list first.

Answer 6

Just add k-value = "user.id"to the template.

Working Plunker

Answer 7

I got a solution that works.

  <select kendo-drop-down-list
         k-options="odsSoluciones"
         k-data-text-field="'descripcion'"
         k-data-value-field="'solucionId'"
         k-value="prescDPIntercambio.solucionDPId"
         ng-model="prescDPIntercambio.solucionDPId">
 </select>


$scope.odsSoluciones = 
     dataSource: new kendo.data.DataSource({
         data: solucionesModel.data,
         }),
    };

In my case odsSoluciones returns an array with "solucionId" and "descripcion" fields and prescDPIntercambio.solucionDPId is the value I want to see selected