Question

I have a input element, which use the type-ahead plugin from bootstrap. I want to set the data-source attribute as the user typing. The effect is like instance search.

<input id="test" data-provide="typeahead" data-source="{{titles}}"/>

And in my AngularJS controller, I have

$scope.titles = my_array_object

After above code is executed, I see in Chrome developer tool that the data-source attribute is set correctly.

But in Chrome console, when I execute

$('#test').data('source')

the return value is “”, an empty string

What is the correct way to set the element attribute?

Answer 1

I think you want something like this : http://plnkr.co/edit/ASeDxB5445HeiLKOq409?p=preview

 var myApp = angular.module("app",[]);

  myApp.directive('moDataSource',function() {
        return {
          restrict:"A", 
          scope:{
            moDataSource:"=",
          },              
          link: function(scope, elem, attrs) {
            var typeahead = elem.typeahead().data("typeahead");             
            typeahead.source = scope.moDataSource;     
          }         
        };
        });

   function MainCtrl($scope) {       
       $scope.addItem = function (item) {
         if(item.length > 0)
            $scope.array.push(item);
       };
       $scope.array = ['Safari',"Internet Explorer","FireFox","Chrome"];     
   }