AngularJS ng-model not bound to Kendo UI dropdown when datasource data not in range

Question

I'm developing a complex application using angularjs vs Kendo UI.
Here is the simple view:

<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>

Here is simple js:

<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>

Now you can see that $scope.selectedProduct = 51; and pageSize: 50 and that means that the dropdown is never get initialized with a predefined value. Feel free to update $scope.selectedProduct with the value 1 to 50 and see the dropdown actually initialized. This is the simplest code to highlight the problem. In real world this is pretty much the same scenario so I'd like to figure out how to make this binding work in an elegant way.

Here is a dojo: http://dojo.telerik.com/OpeqO

Answer 1

You can watch the selectedProduct and if the new value is null you can change the default.

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