Angular record not binding through directive - angularjs

Question

I am creating a form which you can add multiple columns which maps to an array.
An example of the record model looks like this
record = {'template_name' => 'name', 'detail_section_header' => ['Name', 'Date', 'Assigned To'}
Currently, i'm doing it like this
html:
<form>
<div class="x-label">Name</div>
<input type="text" placeholder="Name" ng-model="record.template_name" autofocus required />
<table>
<tr>
<thead ng-repeat="i in record.detail_section_header track by $index">
<input type="text" detail-section-header-input index="{{$index}}" />
</thead>
</tr>
... <buttons to add/remove columns which increments and decrements the size of detail_section_header> ...
</table>
</form>
directive in coffeescript:
angular.module('xtiri').directive 'detailSectionHeaderInput', ->
link: ($scope, el, attrs) ->
el.on('keyup', ->
$scope.record.detail_section_header[attrs.index] = el.val()
)
What is currently happening is that array (detail_section_header) doesn't populate during the key-up to the bound model (record) until I change another field in the bound model, like the template_name, then it updates. I'm guessing this has something to do with when it digests? Any suggestions on how to make that array populate instantly after typing?

Answer 1

Angular already has ngModel for binding to input elements, so you don't need a custom directive.
Here's how you should use ngModel to handle two-way binding:
<thead ng-repeat="i in record.detail_section_header track by $index">
<input type="text" ng-model="record.detail_section_header[$index]" />
</thead>
Note: Don't try bind to the i variable of the ngRepeat.
For example, this won't do what you expect:
<input type="text" ng-model="i" />
It would be like doing this:
(code just for demo purposes, Angular internals very different)
var detail_section_header = ['Name', 'Date', 'Assigned To'];
var $index = 0;
// This is like using `ng-model="record.detail_section_header[$index]"`
detail_section_header[$index] = 'new value';
// **Correct: **
// We get the expected result,
// `detail_section_header[$index]` has the new value
// This is the equivalent of trying `ng-model="i"`
var i = detail_section_header[$index];
i = newValue;
// **Incorrect:**
// `detail_section_header[$index]` is unchanged