Binding to function in custom control in flex

Question

Cannot seem to get the binding to work between the user control and the Model. This is my first attempt as I am just playing around with flex as an alternative to Silverlight

This is my model

<mx:XML  format="e4x" id="searchCriteria">
 <searchCriteria>
  <surname>{ surNameCtl.currentSearchTypeValue }</surname>
  <surname_criteria>{surNameCtl.currentSearchTextValue}</surname_criteria>
 </searchCriteria>
</mx:XML>

the code....

<mx:Form id="searchForm" >
 <mx:FormItem>
  <local:SearchNameCtrl labelValue="Sur Name" id="surNameCtl" />
 </mx:FormItem>
 <mx:Button id="searchBtn" label="Search" enabled="true" click="onClick()">
 </mx:Button>
</mx:Form>

user component

 [Bindable]
 public function get currentSearchTypeValue():Object {
  return SurNameCB.selectedItem.label;
 }


 public function set currentSearchTypeValue(item:Object):void {
  SurNameCB.selectedItem.label;
 }

 [Bindable]
 public function get currentSearchTextValue():Object {
  return surnameTxt.text;
 }


 public function set currentSearchTextValue(text:Object):void {
  surnameTxt.text = text as String;
 }