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.