AngularJS Select other option and get value from textbox

Question

Using AngularJS I have a list of selected option and one additional "New" option. What I am trying to do is, when "New" option is chosen it will show a text-box to add a new value.

<select ng-model="group.name" ng-options="bl.Name for bl in Groups" >
      <option value="VALUE FROM TEXT BOX">New</option>
</select> 

<div class="col-md-4" ng-show="WHEN NEW OPTION IS Chosen ">
<input class="text-box" type="text" name="NewValue" ng-model="group.name" />
</div>

Solution

You can try like this

Working Demo

<div ng-app='myApp' ng-controller="ArrayController">
    <select ng-model="group.name" ng-options="Group.Name for Group in Groups"></select>
    <div class="col-md-4" ng-show="group.name.Value == 'new'">
        <input class="text-box" type="text" name="NewValue" ng-model="newValue" />
        <button ng-click="add(newValue)">Add</button>
    </div>
</div>

Comments

[Muffin]

Sorry for confusion, but "VALUE FROM TEXT BOX" means It will get the value from textbox for group.name ng-model. It is just like any other dropdown operation where you have an other option to add new value. And textbox appears to add new value.

[Nidhish Krishnan]

when the new option is selected within the dropdown, you want the textfield to be displayed and you want to add a new option to the select , am i right

[Muffin]

Yes. to watch the group.name value please check this {{group.name}} it does not change with text field value in your solution

[Muffin]

Hi thanks for your support. It is almost the answer. But Once it adds the new value it should be selected in dropdown too. Could you please update your solution accordinglyso that i can mark it as an answer.

[Muffin]

Thanks for your answer. But Is it possible that when you insert a new value it is selected automatically.

[Devner]

It does work as per the first code you provided on jdFiddle. Seems like that the code in the second & third links are broken. Clicking on the "Add" button does not add the entry to the list in the 2nd link and there is no "Add" button in the 3rd link. So that makes the code posted in the first link as the final answer to the OP question. Am I right?

[Devner]

@NidhishKrishnan The problem that I found out with the code is that after the Add button is clicked & I repeat the steps for adding a new entry again, the text box is pre-filled with the most recent entry. Highlighting the recent entry in select dropdown is fine but pre-filling textbox is not fine. I see that there is a code $scope.newValue = ''; to clear the textbox in add function, but it does not clear the textbox. Any ideas on what may be going wrong here?