AngularJS ng-model, не связанная с раскрывающимся списком пользовательских интерфейсов Kendo, когда данные данных не находятся в диапазоне

Question

Я разрабатываю сложное приложение с использованием angularjs vs Kendo UI.
Вот простой вид:

<div id="example" ng-app="KendoDemos"> 
    <div ng-controller="MyCtrl"> 
     <h4>DropDown</h4> 
     <select kendo-drop-down-list="" options="options" ng-model="selectedProduct"></select> 
    </div> 
</div> 

Здесь просто ЯШ:

<script> 
    angular.module("KendoDemos", [ "kendo.directives" ]) 
     .controller("MyCtrl", function($scope){ 
      $scope.selectedProduct = 51; 
      $scope.options = { 
       autoBind: true, 
       dataTextField: "ProductName", 
       dataValueField: "ProductID", 
       filter: "contains", 
       suggest: true, 
       dataSource: { 
       transport: { 
        read: { 
        dataType: "jsonp", 
        url: "//demos.telerik.com/kendo-ui/service/Products" 
        } 
       }, 
       pageSize: 50 
       } 
      }; 
     }) 
</script> 

Теперь вы можете увидеть, что $scope.selectedProduct = 51; и pageSize: 50, и это означает, что выпадающий никогда не инициализируются с заданным значением , Не стесняйтесь обновлять $scope.selectedProduct со значением от 1 до 50 и видеть, что выпадающий список фактически инициализирован. Это самый простой код, чтобы подчеркнуть проблему. В реальном мире это примерно такой же сценарий, поэтому я хотел бы выяснить, как сделать эту обязательную работу элегантным способом.

Вот додзё: http://dojo.telerik.com/OpeqO

Answer 1

Вы можете посмотреть selectedProduct и если новое значение равно нулю вы можете изменить значение по умолчанию.

$scope.$watch('selectedProduct',function(newVal,oldVal,$scope){ 
    if(newVal==null){     
     $scope.selectedProduct = 1; 
    } 
});