Using Bootstrap typeahead with Angular

Question

I am currently developing a web application which uses twitter-bootstrap and Angularjs in good harmony. However, I have problems with the typeahead and using it as a ng-mode

Answer 1

Well, I have created a dirty workaround. Based on the example located here: https://groups.google.com/forum/#!topic/angular/FqIqrs-IR0w/discussion, I have created a new module for the typeahead control:

angular.module('storageApp', []).directive('typeahead', function () {
return {
    restrict:'E',
    replace:true,
    scope:{
        model:'=',
        source:'&'
    },
    template:'<input type="text" ng-model="model"/>',
    link:function (scope, element, attrs) {
        console.log(scope.source);
        $(element).typeahead({
            source:scope.source,
            updater:function (item) {
                scope.$apply(read(item));
                return item;
            }
        });

        function read(value) {
            scope.model = value;
        }
    } // end link function
}; // end return
}); // end angular function

I had some issues with the databinding, the auto-fill options are gathered from an Angular control, and I had the issue that the control was created before this information was ready. Therefore, I added an html-attribute (datasource) to the typeahead control, and set up an $observe function in the constructor.

<typeahead id="addSupplier" model="addSupplier" placeholder="Skriv inn leverandør" class="typeahead" source="getSuppliers()" ></typeahead>

I think this is a dirty solution, so if anyone has a better idea, I am welcome to hear it :). The bug is described here: https://github.com/angular/angular.js/issues/1284