Editable select

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl as vm">
    <editable-select 
      ng-model="vm.selected" 
      options="vm.options" 
      other="Other">
    </editable-select>

    <hr>
    <span>User selected: {{ vm.selected }}</span>
  </body>

</html>

angular
.module('app', [])

.controller('Ctrl', function() {
  var vm = this;
  vm.options = ['One', 'Two'];
})

.directive('editableSelect', function() {
  return {
    restrict: 'E',
    require: '^ngModel',
    scope: {
      ngModel: '=',
      options: '=',
      other: '@'
    },
    replace: true,
    templateUrl: 'editable-select-tpl.html', 
    link: function(scope, element) {
      scope.isDisabled = true;

      scope.click = function(option) {
        scope.ngModel = option;
        scope.isDisabled = !scope.other || scope.other !== option;
        if (!scope.isDisabled) {
          element[0].querySelector('.editable-select').focus();
        }
      };
      
      var unwatch = scope.$watch('ngModel', function(val) {
        if (!scope.isDisabled) {
          scope.other = scope.ngModel;
        }
      });
      
      scope.$on('$destroy', unwatch);
    }
  };
});

html, body {
  margin: 15px;
  width: 160px;
}

input[name="editable-select"]:disabled {
  background-color: #ffffff;
}

.dropdown-menu:hover {
  cursor: pointer;
}

.dropdown-menu li {
  padding-left: 10px;
}

.dropdown-menu li:hover {
  background-color: #eeeeee;
}

Angular editable dropdown - make editable based on selected value
http://stackoverflow.com/q/41619490/1061668

<div>
  <div class="input-group dropdown">
    <input name="editable-select" 
           type="text" 
           class="form-control dropdown-toggle editable-select" 
           ng-disabled="isDisabled" 
           ng-model="ngModel">
    <ul class="dropdown-menu">
      <li ng-repeat="option in options" 
          ng-bind="::option" 
          ng-click="click(option)">
      </li>
      <li ng-if="other" role="presentation" class="divider"></li>
      <li ng-if="other" ng-bind="other" ng-click="click(other)"></li>
    </ul>
    <span class="input-group-addon dropdown-toggle" 
          data-toggle="dropdown">
      <span class="caret"></span>
    </span>
  </div>
  <span class="small text-muted" ng-show="!isDisabled">Type in your selection</span>
</div>