Angular UI Typeahead not working - No errors

Question

I'm having some issues getting a type-ahead field working. I think I've included all the dependencies and hooked it up correctly. It's using a static array so there shouldn't be any data issues.

There's no errors being returned and all the JS files seem to have loaded correctly therefore I'm out of ideas as to why it isn't working.

I've created a plunkr to demonstrate this.

Here is my actual production code

<script src="https://code.angularjs.org/1.2.29/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>
<script src="@Url.Content("~/Scripts/TaggedObjectTagEditorSPA.js")"></script>

<div ng-app="mybookwise" ng-controller="taggedObjectTagEditorSPA as ctrl">
    <div class="panel panel-default">
    <div class="panel-heading">Tags</div>
    <div class="panel-body">
        <p class="tagContainer">
            <span ng-repeat="tag in ctrl.assignedTags"><a ng-click="ctrl.remove($index)" class="label label-primary label-pill tag">{{tag.Name}} <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>&nbsp;<wbr></span>
        </p>
    </div>
    <div class="panel-footer">
        <div class="form-group form-inline">
            <input type="text" ng-model="ctrl.selectedTag" uib-typeahead="tag for tag in ctrl.existingTagNames | filter:$viewValue | limitTo:8" class="form-control" ng-keyup="$event.keyCode == 13 && ctrl.add()">&nbsp;<button type="button" class="btn btn-default" ng-click="ctrl.add()">Add</button>
        </div>
    </div>
</div>
</div>

TaggedObjectTagEditorSPA.ts

module mybookwise {
    'use strict';

    export class TaggedObjectTagEditorSPA {
        existingTags = [];
        existingTagNames = [];
        selectedTag: string;
        assignedTags = [];
        httpService: any;
        baseUrl: string;

        static $inject = ['$http'];

        constructor(private $http: ng.IHttpService) {
            this.loadJson();
            this.selectedTag = "";
        }

        add() {
            var self = this;

            for (var i = 0; i < self.existingTags.length; i++) {
                if (self.existingTags[i].Name == self.selectedTag) {
                    self.assignedTags.push({
                        "Id": self.existingTags[i].Id,
                        "Name": self.existingTags[i].Name
                    });
                    self.selectedTag = "";
                    return;
                }
            }
            self.assignedTags.push({
                "Id": "",
                "Name": self.selectedTag
            });
            self.selectedTag = "";
        }

        remove(index) {
            var self = this;
            self.assignedTags.splice(index, 1);
        }

        private loadJson() {
            var existingTags = angular.fromJson($('#existingTags').html());
            this.existingTags = existingTags;
            var assignedTags = angular.fromJson($('#assignedTags').html());
            this.assignedTags = assignedTags;
            this.copyTagsToTagNameArray();
        }

        private copyTagsToTagNameArray() {
            for (var i = 0; i < this.existingTags.length; i++) {
                this.existingTagNames.push(this.existingTags[i].Name);
            }
        }
    }

    angular.module('mybookwise', ['ui.bootstrap'])
        .controller('taggedObjectTagEditorSPA', TaggedObjectTagEditorSPA);
}

Answer 1

uib-typeahead was introduced in a later version of Angular UI. In this version (0.12.0) it should be typeahead