Angular editable dropdown - make editable based on selected value

Question

UPDATE 1: developed the first sample code to set the basis for correct implementation.
UPDATE 2: developed a working model. See answers.

I found this library:

Answer 1

Here is my solution. This is based on another post, but I cannot remember the source. Thanks to all who helped.

Just add the attribute editable-dropdown against the select element. The value of the attribute must be the ID of the input element.

Style:

.stop-wrap {
    display: inline-block;
}

.select-editable {
    position:relative;
    background-color:white;
    border:solid grey 1px;
    width:120px;
    height:25px;
    vertical-align: middle;
    margin-bottom: 5px;
}
.select-editable select {
    position:absolute;
    top:0px;
    left:0px;
    border:none;
    width:118px;
    margin:0;
}
.select-editable input {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    padding:1px;
    border:none;
}
.select-editable select:focus, .select-editable input:focus {
    outline:none;
}

HTML:

    
          
          Option 1
          Option 2
          Option 3
          Option 4
          Other ...
    
    

JavaScript:

//This uses two fields, SELECT and INPUT. The input element is identfied by the attribute 'editableDropdown'
app.directive('editableDropdown', function (){
    return {
        link: function (scope, elemSel, attrs) {
            //debugger;
            var inpElemID = attrs.editableDropdown;
            var inpElem;
            //The parameter 'elemSel' is the SELECT field
            function initInpElem() {
                if ($(elemSel).is("select")) {
                    inpElem = $('#' + inpElemID);
                } else {
                    //This is in case the Dropdown is based on DATALIST which is not yet implemented
                    //In this case, the input element is actually the same as the dropdown field using DATALIST
                    inpElem = elemSel;
                }
            }
            function updateEditable(elm) {
                initInpElem();
                //Copy value from SELECT element to the INPUT Element
                //Use NgModelController to copy value in order to trigger validation for 'inpElem'
                var selectedValue = $(elm).children("option").filter(":selected").text();
                //or var selectedValue = elm.val();
                //TODO: will have to add more control here since the SELECT value and text are not the same
                //      Might cause some issue while rendering value in PDF.
                angular.element(inpElem).controller('ngModel').$setViewValue(elm.val());
                angular.element(inpElem).controller('ngModel').$render();
                makeEditable(elm);
            }
            function makeEditable(selElm) {
                //debugger;
                initInpElem();
                if ($(selElm).is("select")) {
                    if (selElm.val() == "Other") {
                          $(inpElem).prop("readonly", false);
                    } else {
                          $(inpElem).prop("readonly", true);
                    }
                } else {
                    //This part is not yet implemented. It is to be completed and verified in case the dropdown is `datalist`. You can skip this part.
                    if (elm.value != "Other" && !$(elm).attr("keypressOff")) {
                        $(elm).keypress(function(event) {
                            console.log("keypress preventd")
                            event.preventDefault();
                        })
                    } else {
                        $(elm).off("keypress");
                        $(elm).attr("keypressOff", true);
                        console.log("keypress event removed")
                    }
                }
            }           
            angular.element(document).ready(function(){
                makeEditable(elemSel);
            });
            $(elemSel).change(function () {
                updateEditable(elemSel);
            });
        }
    }
});