input ng-model within ng-repeat - angularjs

Question

I am repeating a list of tasks that I would like other users to be able to comment on using an input field. I repeat the list with ng-repeat and am trying to send the value of the comment input to the server with ng-model and scope. I am testing by console logging but it shows as undefined. Please help!
Html:
<div class="taskContainer">
<div ng-repeat='task in taskList' class="task">
<div class="postedBy">
<h6>{{task.user.userName}}</h6>
</div>
<h4>{{task.taskText}}</h4>
<div class="comments">
<input ng-model="newComment" type="text" placeholder="comments">
<button ng-click='comment(task.taskId)' type="button" name="button">Add</button>
<h6>{{task.commentText}}</h6>
</div>
</div>
</div>
JS controller:
$scope.comment = function(id,text){
console.log(`send comment text ${$scope.newComment}`);
console.log(`task Id: ${id}`);
};
This is the first time I've tried to do more than display itmes with ng-repeat

Answer 1

You're getting undefined because ngRepeat creates its own $scope.
Always assign ngModel using Dot Rule or controller-as-syntax.
Put it in your controller:
$scope.model = {};
Then use the ngModel as this:
<input ng-model="model.newComment[$index]" type="text" placeholder="comments">
Then you can have something like this:
<div class="taskContainer">
<div ng-repeat="task in taskList track by $index" class="task">
<div class="postedBy">
<h6>{{task.user.userName}}</h6>
</div>
<h4>{{task.taskText}}</h4>
<div class="comments">
<input ng-model="model.newComment[$index]" type="text" placeholder="comments">
<button ng-click='comment($index)' type="button" name="button">Add</button>
<h6>{{task.commentText}}</h6>
</div>
</div>
</div>
$scope.comment = function(index) {
console.log(`send comment text ${$scope.model.newComment[index]}`);
console.log(`task Id: ${taskList[index].id}`);
};
Note: Your function is expecting 2 parameters, you should change it to:
$scope.comment = function(id) {

Answer 2

Thanks for the help from #developer033.
Here is what solved my problem:
HTML:
<div class="taskContainer">
<div ng-repeat="task in taskList track by $index" class="task">
<div class="postedBy">
<h6>{{task.user.userName}}</h6>
</div>
<h4>{{task.taskText}}</h4>
<div class="comments">
<input ng-model="model.newComment[$index]" type="text" placeholder="comments">
<button ng-click='comment(task.taskId,$index)' type="button" name="button">Add</button>
<h6>{{task.commentText}}</h6>
</div>
</div>
</div>
and the JS:
$scope.model = {};
$scope.comment = function(id, index) {
console.log(`send comment text ${$scope.model.newComment[index]}`);
console.log(`task Id: ${id}`);
};

Answer 3

HTML,
<input ng-model="newComment" type="text" placeholder="comments">
<button ng-click='comment(task.taskId, newComment)' type="button" name="button">Add</button>
JavaScript,
$scope.comment = function(id, text) {
console.log(`task Id: ${id}`);
console.log(`send comment text ${text}`);
};