I recently implemented a form using rails scaffolding, which is functioning properly. However, I am now looking to enhance it by adding a new Angular controller. The purpose of this controller would be to calculate a score/progress bar that displays the percentage completion of the user's application.
One issue I encountered during the update process is that Rails assigns a value to the form control, but ngModel resets that controller because I did not initialize the values in the JavaScript section.
In the code snippet below, you can see that during editing, the side_id control becomes empty:
Is there a way to efficiently read the form's various controls without having to resort to data binding?
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#general" data-toggle="tab">General Data</a></li>
<li><a href="#location" data-toggle="tab">Location</a></li>
<li><a href="#suppl" data-toggle="tab">Additional Data</a></li>
<li><a href="#photos" data-toggle="tab">Photos</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane mypanel active" id="general">
<br/>
<div class="form-group">
<div class="col-md-2">
<div class="field">
<%= f.label :side_id %><br>
<%= f.collection_select(:side_id, Side.all,:id,:label,{}, {:class => "form-control", "ng-model" => "side_id"}) %>
{{side_id}}
</div>
</div>
<div class="col-md-4">
<div class="field">