Angular drop-down and text input in same field and Angular data-binding

Question

Is it possible to create a field input in angularjs, which can take value from dropdown and also has custom input. So the following two input options should be one, and user can choose value from dropdown or write a custom value.

<input name="TypeCode" type="text" ng-model="sample"/>
  <select class="input-large input-large-altered " ng-model="sample">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="E">E</option>
   </select>

Secondly I want to bind input value of several ng-models to one ng-model using input option, but it seems not working. For example in following form if user choose Category: E, Type: X and Number 2, Type Code should be "EX2" http://plnkr.co/edit/gONebPq3wFJiQemQeEnL

<div class="row col-md-12">

    <div class="col-md-5">

      <label class="control-label col-md-4 ">Type Code</label>

      <div class="col-md-4">
        <input class="text-box input-large input-large-altered" name="TypeCode" type="text" ng-model="TypeCode" ng-readonly="true" value="{{Category}}+{{Type}}+{{Number}}"  />

      </div>
    </div>


    <div class="col-md-5">
      <label class="control-label col-md-4 ">Category</label>

      <div class="col-md-4">
        <select class="input-large input-large-altered " ng-model="Category">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="E">E</option>
        </select>
      </div>
    </div>
  </div>

   <div class="row col-md-12">

    <div class="col-md-5">

      <label class="control-label col-md-4 ">Type</label>

      <div class="col-md-4">
        <select class="input-large input-large-altered " ng-model="Type">
          <option value="X">X</option>
          <option value="Y">Y</option>
          <option value="Z">Z</option>

        </select>
      </div>
    </div>


    <div class="col-md-5">
      <label class="control-label col-md-4 ">Number</label>

      <div class="col-md-4">
        <select class="input-large input-large-altered " ng-model="Number">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>

        </select>
      </div>
    </div>
  </div>

Solution

please see here: http://plnkr.co/edit/YIQRFA3tjM4CtYI2Bn8U?p=preview

<div class="row col-md-12">

    <div class="col-md-5">

      <label class="control-label col-md-4 ">Type Code</label>

      <div class="col-md-4">
        <input class="text-box input-large input-large-altered"
        name="TypeCode" type="text" 
        ng-model="TypeCode"    />

      </div>
    </div>

js:

 var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.updateTypecode = function() {
        var a = ($scope.Category) ? $scope.Category : "";
        var b = ($scope.Type) ? $scope.Type : ""
        var c = ($scope.Number) ? $scope.Number : ""
        $scope.TypeCode = a + b + c;
      }
    });

Comments

[Muffin]

Thank you, I was expecting for something without JS :) But it is a legitimate answer :). Could you answer the first part ? where user can choose value from dropdown or write a custom value ...

[sylwester]

@Muffin yes you can please see here :plnkr.co/edit/YIQRFA3tjM4CtYI2Bn8U?p=preview