Why my Angular-UI typeahead is not working?

Question

I am writing AngularJS 1.5+ app with TypeScript using AngularJS components.

I want to use ui.bootstrap.typeahead directive from UI Bootstrap library: https://angular-ui.github.io/bootstrap/#!#typeahead

based on this simple example: https://codepen.io/joe-watkins/pen/EagEWv

So, I followed this working example, but not sure what I am missing, I get no errors, but the list doesnt show up.

Here is the code for my component layout.component.ts (don't worry about the name):

namespace AppDomain {

    class LayoutComponent {
        public bindings: any;
        public controller: any;
        public controllerAs: string;
        public templateUrl: string;

        constructor() {
            this.controller = LayoutController;
            this.controllerAs = 'vm';
            this.templateUrl = '/app/layout/layout.component.html';
        }
    }

    class LayoutController {
        states: string[];
        selected: string;

        constructor() { console.log('LayoutComponent'); }

        $onInit() {
            this.states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
        }
    }

    angular.module('app').component('layoutComponent', new LayoutComponent());
}

where layout.component.html contains the actual input field (simplified):

<input name="states" id="states" type="text" placeholder="enter a state" 
       ng-model="vm.selected" 
       uib-typeahead="state for state in vm.states | filter:$viewValue | limitTo:8" 
       class="form-control">

while on the main page:

<layout-component></layout-component>

I have included the following required files:

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-filter/dist/angular-filter.min.js"></script>
<script src="/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

Unfortunately, nothing shows up when I start typing. Am I missing something?

UPDATE

must be uib-typeahead instead of just typeahead, post updated, the code is now working!

Answer 1

UPDATE

must be uib-typeahead instead of just typeahead, post updated, the code is now working!