AngularJS 1.4.x

var app = angular.module('plunker', []);

function Data(n) {
  this.n = n;
}

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.data = [
      new Data(1),
      new Data(2),
      new Data(3)
    ];
    
    
  $scope.addNew = function() {
    for (var i = 0; i < $scope.data.length; i += 1) {
      $scope.data[i].n *= 10;
    }
    
    $scope.data.push(new Data(1));
  }
  
});

app.directive('data', function() {
  return {
          require: 'ngModel',

          template: '<div><span>n using scope: {{n}}</span><br><span>n using model: {{model.n}}</span></div>',
          
          restrict: 'E',
          link: postLink,
          scope: {},
        };
                  
  function postLink(scope, element, attrs, ngModelController) {
      ngModelController.$render = function() {
          var $viewValue = ngModelController.$viewValue;
          scope.n = $viewValue.n;
          scope.model = $viewValue;
      };
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="addNew()" class="btn btn-success">Add new</button>
    
    <div ng-repeat="d in data">
      <data ng-model="d"></data>
    </div>
  </body>

</html>

/* Put your css in here */