How can I assign different ng-model values to several input fields created from one directive

Question

I created a directive to dinamically add different form fields. The problem is that once I add more than one directive based field, the ng-model is duplicated. I'm new to working with directives,hope you can help.

    var app = angular.module('app', []);
      angular.module('app').controller('MainCtrl', function ($scope, $compile) {

    $scope.add = function(ev,attrs){//$on('insertItem',function(ev,attrs){
      var iact = angular.element(document.createElement('itemactivo'));
      var el = $compile( iact )( $scope );

      //where do you want to place the new element?
  angular.element(document.body).append(iact);

  $scope.insertHere = el;
};

});


// directive
angular.module('app')
 .directive('itemactivo', function () {
   return {
      templateUrl: 'itemactivo.html',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {

       }
        };
       });

I created a plunker with the problem

http://plnkr.co/edit/IDD5KFO7UEOnP8cSuN33?p=preview

Answer 1

Add scope: true in your itemactivo directive. Code should look like below:

angular.module('app')
  .directive('itemactivo', function () {
    return {
      scope:true,
      templateUrl: 'itemactivo.html',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
       // element.text('this is a chart');
      }
    };
  });