Angular ui-select: How to bind only selected value to ng-model

Question

$scope.property = new Property();
$scope.property.propertyType = {};

$scope.propertyTypes = [
    { value: 'ResidentialPlot', name: 'Residential Plot' },
    { value: 'CommercialPlot', name: 'Commercial Plot' },
    { value: 'Apartment', name: 'Apartment/Flat' },
    { value: 'Townhouse', name: 'Townhouse' },
    { value: 'House', name: 'Single Family House' },
    { value: 'Commercial', name: 'Commercial Property' }
];

<label for="ptype" class="col-sm-2 control-label">Property Type</label>
<p>Populated: {{property.propertyType}}</p>
<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type">
    <ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match>
    <ui-select-choices repeat="propType in propertyTypes">
        <span ng-bind-html="propType.name"></span>
        <small ng-bind-html="propType.value"></small>    
</ui-select-choices>

This gives me:

$scope.PropertyType = {"value":"Apartment","name":"Apartment/Flat"}

PropertyType in my schema is just a string so I want to bind selected value instead of selected JSON Item.

$scope.PropertyType = "Apartment"

What should I bind to my ng-model to get this?

Answer 1

You don't need $watch.

<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type">
    <ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match>
    <ui-select-choices repeat="propType.value as propType in propertyTypes track by $index | filter: $select.search">
        <div ng-bind-html="propType.value | highlight: $select.search"></div>    
</ui-select-choices>