Angular dropdown and text input in the same field and Angular data binding

Question

Is it possible to create field input in angularjs, which can take a value from the dropdown menu, and also has user input. Thus, the following two input parameters must be the same, and the user can select a value from the drop-down list 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 associate the input value of several ng models with one ng model using the input option, but it does not seem to work. For example, in the following form, if the user selects a category: E, type: X and number 2, the 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>

Answer 1

. : 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;
      }
    });