I have an angular app which extracts data from a JSON
file which populates the webpage via directive template for the user using ng-repeat
.
When the page is initially loaded, the ID(from the json file) in (p) element is 1.
<p id="pollidholder" style ="display:none" ng-bind-html="item.id">{{item.id}}</p>
Once the user presses a button(Next, ng-click), the ID is updated 2 in the <p>
element via a directive template. I am using the ID to register the users input.
In my back end Javascript (uservotedd.js), I am using
var pollidholder1 = document.getElementById('pollidholder').innerHTML;
to extract the ID from the <p>
element.
However, the ID is not updated from 1 to 2 for the var pollidholder even though the <p>
element is changed on the page itself.
How do I update my Javascript variable once the html <p>
element has changed? Please help. I would like avoid major rewrite of my code. Note the Alert message is not update to reflect the change in ID when the user hits the submit button.
Please find the plunker example here https://embed.plnkr.co/3kIxhW2Iq5lKQm81csln/