Handle re-assignment of dropdown items

[aantillonl]

Hi, first of all very nice directive, i've used it in my project and love how it works.

would you consider this pull request based in the following issue?

I found that when the object binded to the dropdown items is re-assigned, the dropdown items are not updated.

for example, if we set the dropdown items in the controller, and then that value is re-assigned later in the app, for example

// Assgin the dropdown items
self.defaultDropdownStrings = ['China', 'Sweden', 'United Kingdom', 'United States'];

// Re-assgin after 10 seconds. Dropdown not updated
setTimeout(function(){  
    self.defaultDropdownStrings = ['China', 'Sweden', 'United Kingdom', 'United States', 'Mexico']; 
    
    // Although this would work
    // scope.defaultDropdownStrings.push('Mexico');
}, 10000) 

See it in these plunkers (which i forked from yours, so they will look familiar :p ), I am re-assigning the items in line 100

• This one doesn't work, this is with the default directive
• This one works, this one is with the code i've submitted

I believe this is because once it is assigned, the binding in the directive is made to that object (called scope.defaultDropdownItems in the directive), and then the variable scope.dropdownItems is set to the value of scope.defaultDropdownItems. But then, if the list is re-assigned, scope.defaultDropdownItems, will change, but not scope.dropdownItems because the directive is only making the assignment once at the beginning, and is only "watching" for scope.dropdownItems.

I have worked around this by adding a $watch to the directive code, to watch for changes in the variable scope.defaultDropdownItems, and re-assign the value of scope.dropdownItems when scope.defaultDropdownItems changes.

Additionally I've separated the controller function because in my app i had to $inject the dependencies explicitly, but this is not really important.

Thanks