angularjs - Controller must wait until Directive is loaded -

i'm writing small set of angularjs controls, , i'm encountering issue here. control i'm creating button (let's start simple).

the directive looks this:

officebutton.directive('officebutton', function() {     return {         restrict: 'e',         replace: false,         scope: {             isdefault: '@',             isdisabled: '@',             control: '=',             label: '@'         },         template: '<div class="button-wrapper" data-ng-click="onclick()">' +                     '<a href="#" class="button normal-button">' +                       '<span>{{label}}</span>' +                     '</a>' +                   '</div>',         controller: ['$scope', function($scope) {             // controller code removed clarity.         }],          link: function(scope, element, attributes, controller) {              // link code removed clarity.         }     } });         

i've removed code because make question hard understand , don't believe it's needed here.

inside controller of directive, i'm writing api , being done executing following code:

controller: ['$scope', function($scope) {     // allows api on directive.     $scope.api = $scope.control || {};      $scope.api.changelabel = function(label)          $scope.label = label;     } }] 

so, on directive, have isolated scope can pass control property. through property, i'll have access method changelabel.

my control can rendered using following directive in html website:

<office-button control="buttoncontroller"></office-button> 

the controller on application looks like:

officewebcontrolsapplication.controller('officewebcontrolscontroller', ['$scope', function($scope) {     $scope.buttoncontroller = {}; }]); 

i can execute changelabel method right calling following method in scope

$scope.buttoncontroller.changelabel('demo'); 

however, doesn't work since @ point changelabel not defined. button must first rendered.

any idea on how resolve particular issue?

edit: plunker added

i've added plunker provide more information. when changelabel method called within onclick event, working, if call outside, isn't working anymore. because $scope.api.changelabel not defined @ moment of execution (button not rendered yet). have wait in application's controller until button rendered.

kind regards