The below code show the labels from previously selected list any ideas?

Steps to reproduce:

1. Click on List AB
2. Open the list but don't select / click any item
3. Now click on List CD
4. Open the list again and you see A, B as labels instead of C,D but if you click on any item then everything comes properly

 <mx:Script>
      <![CDATA[
           import mx.collections.ArrayCollection;

           public var ab:ArrayCollection=new ArrayCollection([{label: A, data: 1},
                {label: B, data: 2}]);
           public var cd:ArrayCollection=new ArrayCollection([{label: C, data: 3},
                {label: D, data: 4}]);

           private function abClick(event:Event):void
           {
                cb.dataProvider=ab;
           }

           private function cdClick(event:Event):void
           {
                cb.dataProvider=cd;
           }
      ]]>
 </mx:Script>

 <mx:Panel title="ComboBox Control Example"
             height="75%"
             width="75%"
             layout="horizontal"
             paddingTop="10"
             paddingBottom="10"
             paddingLeft="10"
             paddingRight="10">

      <mx:ComboBox id="cb"
                      width="150"/>
      <mx:Button label="List AB"
                   click="abClick(event);"/>
      <mx:Button label="List CD"
                   click="cdClick(event);"/>
 </mx:Panel>