Angular - Auto Complete

This can be used even in your tree view. Hope this helps!

by KevinIsNowOnline

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div ng-controller="TypeaheadCtrl">
    <h4>Type in any US state</h4>
    
     <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>

JavaScript

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



function TypeaheadCtrl($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'];
    // Any function returning a promise object can be used to load values asynchronously
    $scope.getLocation = function (val) {
        return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
            params: {
                address: val,
                sensor: false
            }
        }).then(function (res) {
            var addresses = [];
            angular.forEach(res.data.results, function (item) {
                addresses.push(item.formatted_address);
            });
            return addresses;
        });
    };

    $scope.statesWithFlags = [{
        "name": "Alabama",
        "flag": "5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png"
    }, {
        "name": "Alaska",
        "flag": "e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png"
    }, {
        "name": "Arizona",
        "flag": "9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png"
    }, {
        "name": "Arkansas",
        "flag": "9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png"
    }, {
        "name": "California",
        "flag": "0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
    }, {
        "name": "Colorado",
        "flag":...