Dependent drop-down using Select2 (with MetroUI CSS) is not working as expected.

[alen...@gmail.com]

Please see the following Codepen for the issue in hand.

http://codepen.io/alencdave/pen/EPZWNR

Select2 with MetroUI CSS works well with AngularJS. But when I try using the same in dependent drop down lists I face the issue that view of child drop-down list doesn't get updated accordingly to change in parent drop-down list.

In the Codepen.io pen:
Steps to reproduce:
1. Select 'Item 1' in parent select (parent select's place-holder is 'select a parent')
2. In ''Selected parent" section correct value of selected parent is shown.
3. Child select is bound with correct child option.
4. Select any option from child select.
5. In "Selected child" section correct value of selected child is shown.
6. In Parent select, select 'Item 4'.
7. In ''Selected parent" section correct value of selected parent is shown.
8. Child select is bound but the options are not updated and it still shows the option for parent Item 1.
9. Select any item in child select, In "Selected Child" section correct value of child is shown, but child drop down list shows wrong Item!!

Hence my issue is that even though child select gets the correct options bound to it, it's option list view doesn't refreshes.

Please help me out in resolving this issue. It is kind of do and die for me in my project and we have a lot of dependency on Dependent selects. If it doesn't work I will be in a soup :'(

Another issue is this: if I clear the selection in Parent select, it doesn't clear out the selection in Child select.
Please please Help!!