Text on the Dropdown-Button isn't updating

[MrWook]

<ol class="nya-bs-select" ng-model="model.items" >
     <li nya-bs-option="option in selected.item"  deep-watch="true">
        <a>
             {{option.name | translate}}
        </a>
     </li>
</ol>

As you can see I'm using a filter called "translate" on the labels in the dropdown and the label on the button. The filter translate a marker into the right translation for example, "ITEM_PAPER" into "Paper", when the language is set to english. When I'm loading the page everything works fine but when I'm change the language for the site, only the items in the dropdown change not the button label. And as you can see i tried it with "deep-watch=true" but this doesnt work neither.

My object looks something like that: $scope. selected.item = [ { "value": "1", "name": "ITEM_PAPER" }, { "value": "2", "name": "ITEM_CLOCK" }, { "value": "3", "name": "ITEM_PEN" } ]

The model looks like this: $scope.model.language = 1;

My Global config looks like this: $scope.translate_config={ maxItems: 1, valueField: 'value', labelField: 'name', searchField: ['name'] };

For my regret i can't provide you with a working plunker or fiddle because the whole application with the translation thing is just to big and time consuming to bring it into a plunker or fiddle.

[lordfriend]

This is a design flaw for this particular case. As text in button is the compile result of the dropdown item, no expression will be actually added to the button. so when you model model.items doesn't change, the button doesn't update

[MrWook]

Thank you for the fast replay.

Is there a way to rerender the dropdown or to force the update?

[lordfriend]

Here is a way to make the button update when you change the translate service. It may looks clunky, but should works

Your case is using translate filter to update the options' text in template, this way the collection (selected.item) doen't change so nyaBsSelect directive don't know the change what you make. But if you use the translate filter in your code to actually change the collection. and using deep-watch="true", then nyaBsSelect directive will know the change what you make and update the button text.

It may looks like this

// In your controller, assume that you are using the angular-translate
var changeLanguage = function() {
    $scope.selected.item.forEach(function(value,key) {
        value.name = $filter('translate')(value.name);
    });
}

[MrWook]

Thank your for your tip, but unfortunately this would destroy the marker for the translation, so i can only use this function once. I solve the problem by using a third attribute called "translation" like:

[ { "value": "1", "name": "ITEM_PAPER", "translation": "Paper" }, { "value": "2", "name": "ITEM_CLOCK", "translation": "Clock" }, { "value": "3", "name": "ITEM_PEN", "translation": "Pen" } ]

And with this Object i use the Function like:

var changeLanguage = function() { $scope.selected.item.forEach(function(value,key) { value.translation= $filter('translate')(value.name); }); }

This fixed my problem. I appreciate your plugin it's awsome :)