Angular中指令和控制器之间的变量交换

我知道这个问题已经被问过很多次了，但我似乎找不到适合我的答案。

现在我有一个"邀请更多的人"的表单，它需要一个名字和电子邮件。在表单下面是一个"邀请更多的朋友"按钮，该按钮将触发一个指令"add-more-person"，该指令将添加另一个表单。

我希望人们不能邀请超过10个朋友。当有10个"邀请朋友表单"时，我希望按钮被隐藏。

所以我在指令中添加了一个计数器，这样你就不能在有10个表单之后添加更多的表单，并在我的控制器中添加一个布尔值"addFriends"。

现在我想要我的布尔addFriends改变为false每当指令的计数器达到一定的数量

我不能使用$watch来实现这个，因为我没有使用$scope，而且我尝试过的所有其他方法也都失败了。

<div class="row">
      <div class="column medium-6">                
           <button ng-show="post.addFriends" class="btn-grey" type="button" add-more-person add-friends="post.addFriends">Invite more people</button>
      </div>
      <div class="column medium-6">
             <button class="btn-green" type="button">Send</button>
     </div>
</div>

指令:

(function() {
'use strict';
angular.module('app').directive('addMorePerson', addMorePerson);
function addMorePerson($rootScope, $window, $timeout) {
    return {
        restrict: 'A',
        scope: {
            addFriends: '='
        },
        link: function(scope, elem, attr) {
            var counter = 0;
            console.log('start: ' + scope.addFriends);
            elem.bind('click', appendInput);
            function appendInput() {
                if(counter < 2) {
                    var myEl = angular.element(document.querySelector('#content-form'));
                    var template = '<div class="content">' +
                        '<div class="form-page">' +
                        '<div class="form-field">' +
                        '<label class="form-label">Naam:</label>' +
                        '<div class="form-controls">' +
                        '<input kl_virtual_keyboard_secure_input="on" type="text">' +
                        '</div>' +
                        '</div>' +
                        '<div class="form-field">' +
                        '<label class="form-label">E-mail <span>(verplicht)</span>:</label>' +
                        '<div class="form-controls">' +
                         '<input type="email">' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                    myEl.append(template);
                    counter++;
                } else {
                   scope.addFriends = false;
                   console.log('after: ' + scope.addFriends);
                   return;
                }
            }
        }
    };
}
})();

和Controller:

(function() {
'use strict';
angular
    .module('app')
    .controller('PostDonateController', postDonateController);
function postDonateController(apiFactory, $sessionStorage, $localStorage, $state, $stateParams) {
    var that = this; // jshint ignore: line
    that.addFriends = true;
}
})();

我省略了所有其他代码以使其更易于阅读。所以我的控制台日志在指令中告诉我，它确实开始于true，经过3次点击后，它变成了false。但是这个值没有传递给我的控制器，因此没有隐藏按钮。你知道我该怎么做吗?