How to deal with the non-interpolation of the ngModelController and FormController

“People often want to use form controls in an ngRepeat and so on, without losing the validation benefits that Angular provides. Unfortunately, as of 1.2.4, the ngModelController and FormController do not interpolate their names”

This issue has been reported here.

I had this problem when I was trying to generate specific ids using interpolation. The form controls that was injected in the scope didn’t had the interpolated values.

<form name="{{'ThisIsMyGeneratedFormName'}}">
	<div ng-repeat="model in models">
		<input ng-model="model.value" ng-minlength="3"> 
	</div>
</form>

To solve this issue, we have to create a directive to interpolate the values before the form controls are injected in the scope.

angular.module('interpol', [])
  .directive('interpolForm', function($interpolate) {
    return {
      restrict: 'AC',
      priority: 10000,
      controller: function($scope, $element, $attrs) {
        $attrs.$set('name', $interpolate($attrs.interpolForm || $attrs.name)($scope));
        $element.data('$interpolFormController', null);
      }
    };
  })
  .directive('interpolModel', function($interpolate) {
    return {
      priority: 10000,
      restrict: 'AC',
      controller: function($scope, $element, $attrs) {
        $attrs.$set('name', $interpolate($attrs.interpolModel || $attrs.name)($scope));
        $element.data('$interpolModelController', null);
      }
    };
  });

<form interpol-form="{{'sexyform'}}">
	<div ng-repeat="model in models">
    <input ng-model="model.value" ng-minlength="3" interpol-model="model{{$index}}" />        
	</div>
</form>

Before the form controls are injected in the scope, the values are now interpolated.

This technique can be used with ngForm also.

Special thanks to the guys on #angularjs on freenode that helped me solve this issue and to provide a link with the solution.