Angular- xeditable with ui select inside Form element

Question

I want editable-ui-select inside form tag. But it is not working inside form element.

Here is my code

 <form class="col-xs-12 form-horizontal" 
                 editable-form role="form" name="uiTest">
     <div ng-click="uiTest.$show()"  onaftersave="ctrl.onTypeSelect(ctrl.selectedType)"  
                      editable-ui-select="ctrl.selectedType" 
                      buttons="no" 
                      e-clickable="true" 
                      blur="submit"
                      data-e-name="type" 
                      name="type" 
                      theme="bootstrap"
                      data-e-ng-model="ctrl.selectedType" >
            
                                        {{ctrl.selectedType.key}}
                                      
          <editable-ui-select-match allow-clear="true" placeholder="Search {{ctrl.label}} by Name">
                                            {{$select.selected.name}} 
          </editable-ui-select-match>
          <editable-ui-select-choices repeat="item in ctrl.filteredItems = (ctrl.types | filter : {name : $select.search})">
                                            <div ng-bind-html="item.name | highlight: $select.search"></div> 
          </editable-ui-select-choices>
        </div>
    </form>

I want it without the use of buttons. So I have added buttons="no". When I run this, the ui-select opens, i can select item from drop down, but on select of item, it doesn't changes back to view mode.

EDITED

I have added a jsfiddle link.