title: Kendo UI Angular JS and AutoComplete with a service
body: <p>I'm making an Angular App and I'm starting to use some of the Kendo UI controls.  I'm having some issues wiring up the AutoComplete control.  I would like to use a factory that will return the list of "auto complete" values from my database.</p>
  
  <p>I have iincluded the auto complete control and I'm trying to use the k-options attribute:</p>
  
  <pre><code>&lt;input kendo-auto-complete ng-model="myFruit" k-options="FruitAutoComplete"  /&gt;
  </code></pre>
  
  <p>In my controller the following hard coded list of fruits work:</p>
  
  <pre><code> $scope.FruitAutoComplete = {
              dataTextField: 'Name',
              dataSource:[
                  { id: 1, Name: "Apples" },
                  { id: 2, Name: "Oranges" }
              ]
  }
  </code></pre>
  
  <p>When I move this over to use my factory I see it calling and returning the data from the factory but it never get bound to the screen. </p>
  
  <pre><code> $scope.FruitAutoComplete = {
              dataTextField: 'Name',
              dataSource: new kendo.data.DataSource({
                  transport: {
                      read: function () {
                          return    FruitFactory.getYummyFruit($scope.myFruit);
                      }
                  }
              })
          }
  </code></pre>
  
  <p>I end up with the request never being fulfilled to the auto complete. 
  <img src="https://i.stack.imgur.com/qTx3q.jpg" alt="enter image description here"></p>
  
  <p>My factory is just returning an array of fruit [
  my Fruit Factory Code:</p>
  
  <pre><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;
                          });
                  }
  </code></pre>