Kendo UI Angular JS and autocomplete with service

Question

I am creating an Angular application and I am starting to use some elements of the Kendo UI interface. I'm having trouble connecting an AutoComplete control. I would like to use a factory that will return a list of "auto complete" values ​​from my database.

I have automatic full control enabled, and I'm trying to use the k-options attribute:

<input kendo-auto-complete ng-model="myFruit" k-options="FruitAutoComplete" /> 

The following hard list of fruits works in my controller:

  $scope.FruitAutoComplete = { dataTextField: 'Name', dataSource:[ { id: 1, Name: "Apples" }, { id: 2, Name: "Oranges" } ] } 

When I switch to using my factory, I see that it calls and returns data from the factory, but never gets attached to the screen.

  $scope.FruitAutoComplete = { dataTextField: 'Name', dataSource: new kendo.data.DataSource({ transport: { read: function () { return FruitFactory.getYummyFruit($scope.myFruit); } } }) } 

As a result, I get a request that never runs to complete the auto.

My factory just returns an array of fruits [my Fruit factory Code:

  getYummyFruit: function (val) { return $http.get('api/getFruitList/' + val) .then(function (res) { var fruits= []; angular.forEach(res.data, function (item) { fruits.push(item); }); return fruits; }); } 

Answer 1

Here is your solution

http://plnkr.co/edit/iOq2ikabdSgiTM3sqLxu?p=preview

For plnker, I did not add $ http (UPDATE - here http://plnkr.co/edit/unfgG5?p=preview with $ http) UPDATE 2 - http://plnkr.co/edit/01Udw0sEWADY5Qz3BnPp?p=preview fixed problem according to @SpencerReport

Controller

 $scope.FruitAutoCompleteFromFactory = { dataTextField: 'Name', dataSource: new kendo.data.DataSource({ transport: { read: function (options) { return FruitFactory.getYummyFruit(options) } } }) } 

factory -

 factory('FruitFactory', ['$http', function($http) { return { getYummyFruit: function(options) { return $http.get('myFruits.json').success( function(results) { options.success(results); }); } } }