can't get data from ng-model using signalr - angularjs

Question

here is my .html :
<ul class="messages list-unstyled" ng-repeat="newMessage in messages">
<li>
<p>
<span class="username">{{newMessage.username}}</span><br />
</p>
<p>
<span> {{newMessage.message}}</span>
</p>
<p class="no-pad-bottom date-posted">Send {{ newMessage.date }} <span /></p>
<div class="comments">
<ul class="list-unstyled" ng-repeat="newComment in comments">
<li>
<p>
<span class="commentor"> {{newComment.username}}</span>
<span> {{newComment.message}}</span>
</p>
<p class="no-pad-bottom date-posted">Send {{ newComment.date }} <span /></p>
</li>
</ul>
<form class="add-comment">
<div class="row">
<div class="col-md-10">
<input type="text" class="form-control" ng-model="myComment" placeholder="Add a comment" />
</div>
<div class="col-md-2">
<button class="btn btn-default btn-sm" type="submit" ng-click="addComment(newMessage.id)">Comment</button>
</div>
</div>
</form>
</div>
</li>
</ul>
everything is working. i can send my messages, and i can even send posts, but i get null from ng-model="myComment"
here is the method in js controller
$scope.addComment = function (messageId) {
myChatHub.server.addComment(messageId, userName, $scope.myComment);
};
can you please tell me what's wrong?

Answer 1

You are breaking the golden rule of always having a dot in ng-model .. or in other words using an object
ng-repeat creates a child scope and your primitive assigned to ng-model therefore only exists in the child scope since primitives have no inheritance.
Create model object in controller
$scope.model={}
And then use that ng-model="model.myComment" and change your post to:
$scope.addComment = function (messageId) {
myChatHub.server.addComment(messageId, userName, $scope.model.myComment);
};
This 3 minute video will be very enlightening