How to reset angularjs character count binding in form

Question

I have multiple form fields in an angular view that count down characters as the user types. However, I have a button/link that should reset all the form fields and character counts. When clicked, the form is reset but the character counts are not updated to reflect the change. I know there has to be a model connection I am missing here (I'm an angular newbie). I also know it's probably best to rest the form using $setPristine();, but I am unable to get that to work.

Here's what I've got: http://embed.plnkr.co/5SGjqPhYYIZF1qp0QAAT/preview

I'd appreciate any help I can get! Thanks!

Answer 1

The problem is that your reset button isn't updating the Angular model values your character count calculations rely upon.

Instead of using reset on the form element, just clear the model values:

HTML:

<a href ng-click="clearForm()">RESET</a>

Controller:

$scope.clearForm = function() {
  $scope.TA3 = '';
  $scope.TA4 = '';
}

Revised Plunker