Loading new data into DataSource breaks Angular data bindings

[Chad]

I created a demo here: 

http://dojo.telerik.com/@cglendenin/aJuLe/3

When you first run it, if you click in the Category column of the grid, you get a dropdown list to change the category value. If you choose a different value in the first row, you can see it reflected immediately in the text above the grid. That works via AngularJS's standard data binding: `First product's category: {{ products[0].Category }}`

If you click the "Change Data" button, it runs a function that calls `dataSource.data([/* different array with new data... */])`, which changes the data in the grid. That works as expected. However, after this point, the dropdown list can no longer change the data. I assume that is because, when the dropdown list is initialized, it captures a reference to the original grid data, and calling dataSource.data([...]) makes the DataSource hold a reference to a new object?

Is there a workaround for this problem? Thanks!

[Nikolay Rusev]

Hello Chad,

 

You must change the products reference in the $scope too when changing DataSource data.

 

$scope.products = newProducts;

 

Updated example - http://dojo.telerik.com/@rusev/aDIBI

 

Regards,
Nikolay Rusev
Telerik