How to use the same directive multiple times?

Question

Angular

I wrote my own directive, which should be used several times on the page, but with different data.
As a result, it turns out that it takes data from the last connection and inserts it into all connected directives.
In the markup I connect

<tab heading="Пополнить">
      <transaction type="deposit"></transaction>
    </tab>
    <tab heading="Вывести">
      <transaction type="cashout"></transaction>
    </tab>

Directive:

function transaction(){
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    templateUrl: 'directives/transaction/transaction.html',
    link: function (scope, element, attrs) {
    },
    controller: function($scope, $attrs){
      var type = $attrs.type;

      $scope.textButton = 'Пополнить счет';

      switch (type){
        case 'deposit':
          $scope.textButton = 'Пополнить счет';
              break;
        case 'cashout':
          $scope.textButton = 'Снять';
              break;
        default:
              console.log('мимо');
              break;
      }
    }
  }
}

It turns out that in my case, the inscription in the button is always displayed: "Remove".
How to fix it so that in the first case the button would have the inscription "Deposit account", in the second case "Withdraw"?

Answer 1

Because $scope in the directive will be the same.
UPD: www.plnkr.com