Selected option is not highlighted

Question

When ever i delete any option i am preselecting 'Product'. Even though it is selected it is not highlighted. One new option with value "? string:{{lastSelectedOption}} ?" is showing up.

Html

 <select class="mapping-select" id="SelectId" ng-model="table" name="classesList" size="20" >
                <!-- <option value="? string:{{selectedTable}} ?" style="display:none"></option> -->
                <option value="" style="display:none" ></option>
                <option value="Product" ng-click="selectTable('Product', 'Product')" ng-selected="preSelect">Product</option>
                <optgroup style="font-style: normal;" label="Prices">
                            <option value="{{pa.table}}" id="com.jcatalog.product.Prices:{{$index}}" ng-repeat="pa in tableLists.PricesList track by $index" ng-click="selectTable('Prices', 'Price', $index, tableLists.PricesList)">
                                {{pa.table}}({{$index+1}})
                            </option>
                </optgroup>
                <optgroup style="font-style: normal;" label="ProductAttributeValues">
                            <option value="{{pav.table}}" id="com.jcatalog.product.ProductAttributeValue:{{$index}}" ng-repeat="pav in tableLists.ProductAttributeValuesList track by $index" ng-click="selectTable('ProductAttributeValues', 'ProductAttributeValue', $index, tableLists.ProductAttributeValuesList)">
                                {{pav.table}}({{$index+1}})
                            </option>
                    </optgroup>
                    <optgroup style="font-style: normal;" label="ClassificationAssignment">
                            <option value="{{cg.table}}" id="com.jcatalog.product.ClassificationAssignment:{{$index}}" ng-repeat="cg in tableLists.ClassificationAssignmentsList track by $index" ng-click="selectTable('Product2ClassificationGroup', 'ClassificationAssignment', $index, tableLists.ClassificationAssignmentsList)">
                                {{cg.table}}({{$index+1}})
                            </option>
                    </optgroup>
                    <optgroup style="font-style: normal;" label="ProductRelations">
                            <option value="{{pr.table}}" id="com.jcatalog.product.ProductRelations:{{$index}}" ng-repeat="pr in tableLists.ProductRelationsList track by $index" ng-click="selectTable('ProductRelations', 'ProductRelation', $index, tableLists.ProductRelationsList)">
                                {{pr.table}}({{$index+1}})
                            </option>
                    </optgroup>
                    <optgroup style="font-style: normal;" label="ContractedProduct">
                            <option value="{{cp.table}}" id="com.jcatalog.product.ContractedProduct:{{$index}}" ng-repeat="cp in tableLists.ContractedProductList track by $index" ng-click="selectTable('ContractedProduct', 'ContractedProduct',$index, tableLists.ContractedProductList)">
                                {{cp.table}}({{$index+1}})
                            </option>
                    </optgroup>
                </select>

Option Deletion

$scope.selectTable = function (tname, otname, rowNo, list) {
  getTableData(tname, otname);
  $scope.selectedTable = otname;
  $scope.rowId = rowNo+1;
  $scope.selectedTableList = list;
}

$scope.acceptDeletetion = function () {
      var id;
      if($scope.selectedTable != 'Product'){
        if($scope.selectedTable && $scope.rowId){
          id = $scope.rowId;
          $scope.selectedTableList.splice(id-1, 1);
          updateList($scope.selectedTable, id);
            $scope.preSelect = true;
        } 
      } else {
        growl.error("You can't delete Product table");
      } 
    }

Could anyone help me why this new otion is adding and how can i avoid that?

Answer 1

The error is gone, once i remove the ng-model="table" directive in your dropdownlist.

I think the problem accrued for the model name table value is undefined in loading time, so it takes a object and also it sets a default value for your dropdown,So you got a white space**(you can see the undefined value in rendered html code, see the below image)** . that is a issue. good luck .