Angular UI Bootstrap Typeahead

0
votes

I am using Angular JS for the first time.

Here is my code and its not working. typeahead intellisense is showing as 'Unknown attribute'.

 <div class='container-fluid' ng-controller="HomeController">
    <h4>Search State</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" autocomplete="off" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>

function HomeController($scope, $http) {
$scope.selected = undefined;
$scope.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'];
}

Am I missing some JS files ?

1
angularjsangular-ui-bootstrap
can you set up a jsfiddle - Will Lopez
What is your $viewValue variable set to? Is it present in your $scope? You should not use names starting with the $ symbol for variables as a best practice. - jpmorin
@jpmorin I edit the code. - user3757426
Can you show all your code with the application modules and html please. - jpmorin
@jpmorin see the below answer, that is my code. - user3757426

1 Answers

2
votes

Please see working example here http://plnkr.co/edit/SjASFL8BkKdjLRxUlGVA?p=preview

make sure that you've got those scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

and you definition of your app include ui.bootstrap

var app= angular.module('app', ['ui.bootstrap']);