Angular autocomplete not working - angularjs

Question

From the tutorial. The search box is styled correctly.
But when I type the drop down doesn't appear with the static data in my controller.
Here is my template.
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3">
<div class="panel panel-default panel-filter">
<div class="panel-heading">
<h3 class="panel-title">Calendar Filter</h3>
</div>
<div class="panel-body">
<div class="section section-filter">
<form ng-submit="$event.preventDefault()">
<div class="form-group" style="margin-bottom:0">
<div class="input-group input-group-sm addon-left">
<span class="input-group-addon">View By</span>
<select class="form-control" name="select_view" id="select_view">
<option value="taskown">Task Owner</option>
<option value="taskacc">Task Account</option>
</select>
</div>
</div>
<div class="form-group-taskown">
<div class="space15"></div>
<div class="form-group">
<div class="input-group input-group-sm addon-left">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<div class="autocompletedemoCustomTemplate">
<md-autocomplete
ng-disabled="taskCalendarCtrl.isDisabled"
md-no-cache="taskCalendarCtrl.noCache"
md-selected-item="taskCalendarCtrl.selectedItem"
md-search-text-change="taskCalendarCtrl.searchTextChange(taskCalendarCtrl.searchText)"
md-search-text="taskCalendarCtrl.searchText"
md-selected-item-change="taskCalendarCtrl.selectedItemChange(item)"
md-items="item in taskCalendarCtrl.querySearch(taskCalendarCtrl.searchText)"
md-item-text="item.name"
md-min-length="0"
placeholder=""
md-menu-class="autocomplete-custom-template">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
</div>
<!--
<input type="text" class="form-control" id="searchBox" name="typeahead_example_1" ng-model="searchBox" ng-change="change(text)" auto-complete ui-items="users">-->
</div>
</div>
</div>
</form>
</div><!--/section-->
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-6">
<div class="section section-calendar">
<div id='calendar'></div>
</div><!--/section-->
</div>
<div class="space20 hidden-lg"></div>
<div class="col-sm-12 col-sm-offset-0 col-md-8 col-md-offset-4 col-lg-3 col-lg-offset-0">
<div class="panel panel-default panel-tasks">
<div class="panel-heading">
<h3 class="panel-title">Tasks</h3>
</div>
<div class="list-group" ng-repeat="task in taskList | limitTo: 5">
<a href="{{task.url}}" class="list-group-item">
<span class="badge">{{task.status}}</span>
<h4 class="list-group-item-heading">{{task.heading}}</h4>
<ul class="list-unstyled">
<li><strong>Assigned To:</strong>{{task.assignedTo}}</li>
<li><strong>Releted To:</strong>{{task.relatedTo}}</li>
</ul>
</a>
</div><!--/list-group-->
</div>
</div>
</div><!--/row-->
</div> <!-- /container -->
and controller aka taskCalendarCtrl
'use strict';
angular
.module('taskCalendar')
.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) {
}], taskCalendarCtrl);
function taskCalendarCtrl ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
self.repos = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
// ******************************
// Internal methods
// ******************************
/**
* Search for repos... use $timeout to simulate
* remote dataservice call.
*/
function querySearch (query) {
var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
/**
* Build `components` list of key/value pairs
*/
function loadAll() {
var repos = [
{
'name' : 'Angular 1',
'url' : 'https://github.com/angular/angular.js',
'watchers' : '3,623',
'forks' : '16,175',
},
{
'name' : 'Angular 2',
'url' : 'https://github.com/angular/angular',
'watchers' : '469',
'forks' : '760',
},
{
'name' : 'Angular Material',
'url' : 'https://github.com/angular/material',
'watchers' : '727',
'forks' : '1,241',
},
{
'name' : 'Bower Material',
'url' : 'https://github.com/angular/bower-material',
'watchers' : '42',
'forks' : '84',
},
{
'name' : 'Material Start',
'url' : 'https://github.com/angular/material-start',
'watchers' : '81',
'forks' : '303',
}
];
return repos.map( function (repo) {
repo.value = repo.name.toLowerCase();
return repo;
});
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(item) {
return (item.value.indexOf(lowercaseQuery) === 0);
};
}
}
I get these errors when I click and type in the search box
more details on my error

Answer 1

You have your controller declaration wrong in your code.
The syntax of dependency injection of the controller is not correct.
it should be,
.controller('taskCalendarCtrl', ['$scope', 'task', 'user',
'account','$timeout','$q','$log', function($scope, task , user,
account,$timeout,$q,$log) {
}])
Here is the change in the complete file.
'use strict';
angular
.module('taskCalendar')
.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account','$timeout','$q','$log', function($scope, task , user, account,$timeout,$q,$log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
self.repos = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
// ******************************
// Internal methods
// ******************************
/**
* Search for repos... use $timeout to simulate
* remote dataservice call.
*/
function querySearch (query) {
var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
/**
* Build `components` list of key/value pairs
*/
function loadAll() {
var repos = [
{
'name' : 'Angular 1',
'url' : 'https://github.com/angular/angular.js',
'watchers' : '3,623',
'forks' : '16,175',
},
{
'name' : 'Angular 2',
'url' : 'https://github.com/angular/angular',
'watchers' : '469',
'forks' : '760',
},
{
'name' : 'Angular Material',
'url' : 'https://github.com/angular/material',
'watchers' : '727',
'forks' : '1,241',
},
{
'name' : 'Bower Material',
'url' : 'https://github.com/angular/bower-material',
'watchers' : '42',
'forks' : '84',
},
{
'name' : 'Material Start',
'url' : 'https://github.com/angular/material-start',
'watchers' : '81',
'forks' : '303',
}
];
return repos.map( function (repo) {
repo.value = repo.name.toLowerCase();
return repo;
});
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(item) {
return (item.value.indexOf(lowercaseQuery) === 0);
};
}
}
])

Answer 2

check if you have set ng-controller directive. If not then set it first.
eg :
<div class="container-fluid" ng-controller="taskCalendarCtrl as taskCalendarCtrl">
Next change
.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) {
}], taskCalendarCtrl);
to
.controller('taskCalendarCtrl', taskCalendarCtrl);