I have an input

<input type="text" ng-model="choice.text">

Where choice.text creates a new text property in the object choice. This allows me to send the contents of the input to different page. While this feature works, I would also like to add another feature where the content of the input is displayed and updated in real time on the page. Something to this effect.

Unfortunately, ng-model is already set to choice.text. Is there a way I can have set two values to one ng-model? It would perhaps look like this:

<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>

If not, is there another way to achieve this effect?

EDIT: For those wondering, when I try <p ng-bind="choice.text"></p>it doesnt work for some reason.

EDIT 2: I simplified the code for the sake of the question. Here is the actual code for more detail:

<div class ="ask-container">
    <div ng-switch="cbstate">
      <div ng-switch-when="not-pressed">
        <h1>Choose between... </h1> <!-- I would like to add the dynamic element here -->
      </div>
      <div ng-switch-when="pressed">
        <h1>Hi</h1>
      </div>
    </div>
    <form role="form" ng-submit="submitChoice()">
      <div class="input" ng-repeat="choice in poll.options">
        <input type="text"  ng-model="choice.text" placeholder="Choice {{$index+1}}"><br>
      </div>
      <button class="add" type="button" ng-click="addChoice()">+</button>
      <button class="create" type="submit">Create</button>
    </form>
</div>

EDIT 3: Same code, but with the ng-bind:

<div class ="ask-container">
    <div ng-switch="cbstate">
      <div ng-switch-when="not-pressed">
        <h1>Choose between... </h1>
      </div>
      <div ng-switch-when="pressed">
        <h1>Hi</h1>
      </div>
    </div>
    <form role="form" ng-submit="submitChoice()">
      <div class="input" ng-repeat="choice in poll.options">
        <input type="text"  ng-model="choice.text" ng-change="temp=choice.text" placeholder="Choice {{$index+1}}"><br>
      </div>
      <button class="add" type="button" ng-click="addChoice()">+</button>
      <button class="create" type="submit">Create</button>
    </form>
    <p ng-bind="temp"></p>
    <p ng-bind="choice.text"></p>
</div>

Note: Somebody said that the ng-repeat may be messing with my scope. Maybe keep that in mind as you try and fix my problem.

I have an input

<input type="text" ng-model="choice.text">

Where choice.text creates a new text property in the object choice. This allows me to send the contents of the input to different page. While this feature works, I would also like to add another feature where the content of the input is displayed and updated in real time on the page. Something to this effect.

Unfortunately, ng-model is already set to choice.text. Is there a way I can have set two values to one ng-model? It would perhaps look like this:

<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>

If not, is there another way to achieve this effect?

EDIT: For those wondering, when I try <p ng-bind="choice.text"></p>it doesnt work for some reason.

EDIT 2: I simplified the code for the sake of the question. Here is the actual code for more detail:

<div class ="ask-container">
    <div ng-switch="cbstate">
      <div ng-switch-when="not-pressed">
        <h1>Choose between... </h1> <!-- I would like to add the dynamic element here -->
      </div>
      <div ng-switch-when="pressed">
        <h1>Hi</h1>
      </div>
    </div>
    <form role="form" ng-submit="submitChoice()">
      <div class="input" ng-repeat="choice in poll.options">
        <input type="text"  ng-model="choice.text" placeholder="Choice {{$index+1}}"><br>
      </div>
      <button class="add" type="button" ng-click="addChoice()">+</button>
      <button class="create" type="submit">Create</button>
    </form>
</div>

EDIT 3: Same code, but with the ng-bind:

<div class ="ask-container">
    <div ng-switch="cbstate">
      <div ng-switch-when="not-pressed">
        <h1>Choose between... </h1>
      </div>
      <div ng-switch-when="pressed">
        <h1>Hi</h1>
      </div>
    </div>
    <form role="form" ng-submit="submitChoice()">
      <div class="input" ng-repeat="choice in poll.options">
        <input type="text"  ng-model="choice.text" ng-change="temp=choice.text" placeholder="Choice {{$index+1}}"><br>
      </div>
      <button class="add" type="button" ng-click="addChoice()">+</button>
      <button class="create" type="submit">Create</button>
    </form>
    <p ng-bind="temp"></p>
    <p ng-bind="choice.text"></p>
</div>

Note: Somebody said that the ng-repeat may be messing with my scope. Maybe keep that in mind as you try and fix my problem.

• javascript
• html
• angularjs
• angular-ngmodel

• 1 Why not <p ng-bind="choice.text"></p>? – rocambille Commented Jun 6, 2017 at 5:22
• can you add in the ng-bind part also? – Icycool Commented Jun 6, 2017 at 5:58
• With the ng-repeat="choice in list" there will be list.length inputs and choices. Which choice.text do you want bind outside the ng-repeat? – georgeawg Commented Jun 6, 2017 at 6:21
• For now, just list[0]. Eventually I will want them all to appear in a list but I can do that myself. For now I just want the first input to display in the bind. – Ethernetz Commented Jun 6, 2017 at 6:23

3 Answers 3

For now, just list[0]. Eventually I will want them all to appear in a list but I can do that myself. For now I just want the first input to display in the bind.

To have the first of the list appear in the bind:

<div class="input" ng-repeat="choice in poll.options">
  <input type="text"  ng-model="choice.text" placeholder="Choice {{$index+1}}" />
  <br>
</div>

<p ng-bind="poll.options[0].text"></p>

Each <div> in the ng-repeat has its own child scope with the choice property set to poll.options[0], poll.options[1], poll.options[2], etc. Simply use those values in the parent scope.

Is this not acceptable?

<input type="text" ng-model="choice.text"></p>
<p ng-bind="choice.text"></p>

Use ng-change to update other model

<input type="text" 
       ng-model="choice.text" 
       ng-change="temp=choice.text"/> 

Now for testing, use:

<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>