Assign value to anchor tag - angularjs <p>User sees a list of options (eg: 1.Apple ; 2.Banana ; 3.Mango). There is a textbox where user types in the desired option and clicks send to proceed further.</p> <p><strong>Existing Setup:</strong></p> <p><strong>HTML:</strong></p> <pre><code>&lt;p ng-repeat="opt in objHistory.OptionItems track by $index"&gt; {{ opt.SortOrder }}. {{ opt.OptionName }} &lt;/p&gt; &lt;textarea ng-model="userInput"&gt;&lt;/textarea&gt; &lt;a href="javascript:;" ng-click="GetNextItem()"&gt;Send&lt;/a&gt; </code></pre> <p><strong>JS:</strong></p> <pre><code>$scope.GetNextItem = function () { alert($scope.userInput); //some code } </code></pre> <p>The above code is working good. But now I have changed the options to anchor tags, so user can click on them, instead of typing and the same flow follows.</p> <p><strong>New HTML:</strong></p> <pre><code>&lt;p ng-repeat="opt in objHistory.OptionItems track by $index"&gt; &lt;a href="javascript:;" ng-model = "userInput" ng-init="userInput=opt.SortOrder" ng-click="GetNextItem()"&gt;{{ opt.SortOrder }}. {{ opt.OptionName }} &lt;/a&gt; &lt;/p&gt; </code></pre> <p>I get <code>undefined</code> in the alert now. Where am I going wrong? Can the same <code>ng-model</code> variable name be used multiple times (I'm using it for the <code>textbox</code> and also the <code>anchor</code> tags)?</p>