Почему мои директивы AngularJS разделяют область?

мы попытались создать простую директиву, которая отображает имя и позволяет его изменить. Когда я помещаю множественную директиву на страницу имени, кажется, что все они разделяют атрибут name. Что я делаю неправильно?







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

    app.directive('person', function () {

    function link ($scope, elem, attrs, ctrl) {     

        $scope.name = "OLD"        

        $scope.setName = function() {
            $scope.name = 'NEW';
        }
    }

    return {
      restrict: 'E',
      replace: true,
      template: "<span>Current name = {{name}}<a href="" class="btn" ng-click="setName()">Change name</a><br></span>",
      link : link,
    }

  });

  app.controller('MainCtrl', function ($scope) { });

      




  <br>
  <br>
  <br>
  <br>



Ответы на вопрос(4)

Ваш ответ на вопрос