javascript - Variable exchange between directive and controller in Angular -

i know has been asked loads of times can't seem find appropriate answer case.

at moment have form "invite more people" takes name , email. underneath form button "invite more friends" trigger directive "add-more-person" add form.

i want people not able invite more 10 friends. when there 10 'invite-a-friend-forms' want button hidden.

so added counter in directive won't able add more forms after there 10, , boolean "addfriends" controller.

now want boolean addfriends changed false whenever directive's counter reaches amount.

i can't achieve using $watch since i'm not using $scope , other things tried have failed aswell.

this code looks like:

<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> 

directive:

(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;                 }             }         }     }; } })(); 

and controller:

(function() { 'use strict';  angular     .module('app')     .controller('postdonatecontroller', postdonatecontroller);  function postdonatecontroller(apifactory, $sessionstorage, $localstorage, $state, $stateparams) {      var = this; // jshint ignore: line      that.addfriends = true;  } })(); 

i left out other code make more readable. console logs in directive tell me indeed start @ true , after 3 clicks turns false. value not passed on controller , therefore not hiding button. ideas how achieve this?

call scope.$apply(); @ list line of append function, it'll perform sync between directive , controller. should because append template outside of angular context.

but solution awkward, should append templates via ng-repeat.