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\' },
    { valu         


        

Answer 1

You need to change in your select input the ng-model attribute to selected_propertyType and watch it when it changes, then extract value and assign it to propertyType

$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' }
];

$scope.$watch('selected_propertyType',function(newValue,oldValue){
      if (newValue && newValue!=oldValue){
           $scope.propertyType = $scope.selected_propertyType.value;

      }

})


Property Type
Populated: {{property.selected_propertyType}}

    {{$select.selected.value}}