AngularJS Kendo Autocomplete will not load on page

Question

I am new to Angular and I am having a problem loading the Kendo autocomplete control I have an app.js file and a html view called main.html and I cannot get the dropdown to show for the Kendo autocomplete.

HTML Code:

<div id="example" ng-app="KendoDemos">            
<div class="demo-section k-content" ng-controller="idocCtrl">       
                 <label >Location</label>
                 Locations: {{carsLocations}}
                <!--<input type="text" data-ng-model="carslocationstest">-->
                    <input kendo-auto-complete ng-model="Cars" k-options="options"          style="width:200px;background-color:coral;">
                    <p>Your selection: {{ Cars }}</p>
 </div>
 </div>

JS code

var idocCtrl = ['$scope', '$route', '$upload', '$http', '$location', '$filter', '$interval', '$timeout', function( $scope, $route, $upload, $http, $location , $filter, $interval, $timeout) {
/* Scope Properties */
$scope.selectedSIS = '';
$scope.TEST1 ='';

$scope.carsLocations=[
    {"Name": "The Art Institues of Pittsburgh", "Id": "005"},
    {"Name": "The Art Institues of Atlanta", "Id": "004"},
    {"Name": "The Art Institues of Chicago", "Id": "001"},
    {"Name": "The Art Institues of New York", "Id": "002"},
    {"Name": "The Art Institues of Miami", "Id": "003"}

I am able to right out the scope.carsLocation to the screen but the dropdown will not load the items.

Also i verified that my css and js are being call in the same order as most examples I found.