Passing though an attribute in an Angularjs directive

Question

I'm working a directive that is just a wrapper for the freebase search widget (jquery). This is the first directive I've tried making and I'm running into some problems.

Desired functionality: 1. ability to pass in language (two letter code) for display search results as an attribute 2. ability to specify a function to be called when item is selected (passing through data from selection)

I've setup a plunkr with the directive here. The second bit of functionality works just fine, but I'm having trouble with the language requirement and I'm not sure why.

Passing in the language code works fine when doing it statically (not interpolated):

if(attrs.lang){
     language = attrs.lang;
}

But I can't seem to get it to work when trying to pass in the value like this:

attrs.$observe('lang', function(value) {
      if(value === ""){
           language = 'en';
      } else {
          console.log("lang val " + value);
          language = value;
      }
});

Any idea why this is not working? Any advice would be appreciated.

The directive as it stands:

directive('suggest', function($http) {
    var language; 
    return {
        restrict: 'E',
        template: "<input type='text'>",
        replace:true,
        scope:{
            selectData:'=',
            onSelect:'&'
        },
        link: function(scope, element, attrs) {

            attrs.$observe('lang', function(value) {
                if(value === ""){
                    language = 'en';
                } else {
                    console.log("lang val " + value);
                    language = value;
                }
            });

            if(attrs.lang){
                language = attrs.lang;
            }


            $(element).suggest({

                "lang": language
            })
            .bind("fb-select", function(e, info) { 
                console.log(info);
                scope.onSelect({data:info});
                console.log("language: " + language);
                scope.$apply(function(){
                    console.log("hello apply here");
                    scope.selectData = info;
                });
            });
        }
    };
});

Answer 1

It is not clear from your question, but I think you mean the following problem: when in plunker demo I type 'fr' to the language and then enter something to suggest box it gets results for 'en' language instead.

This is because you already initialized suggest plugin with default language (en). The function provided to $observe function is not called right here - it will be called later, after your directive is initialized. So when language is changed you need to re-initialize the suggest plugin.

I'm not sure what is the correct way to do that as I'm not familiar with that plugin, but at least the following change is working - just added re-initialization to the $observe listener:

    attrs.$observe('lang', function(value) {
      console.log("lang val " + value);
        language = value;
        $(element).suggest({lang: language});
    });