Why can`t I access scope via controller?

Question

I am working on passion project. And I cant access scope to pass data to back-end frame work.

Here is my index file

<div id="main-menu" ng-controller="appCtrl">
//some other code
  <div id="includedDocumentsFilter" style="float:right; display:none; padding-right: 10px;">
    <my-documents validate-options="validateDialogOptions()"  call-dialog="showDialog()"> </my-documents>
  </div>
//some other code
</div>

My custom directive

'use strict';
dbApp
    .directive('myDocuments', [
        function () {

                var documentTemplate =
                    ' <div class="caption-row">' +
                    '<kendo-button style="width:62px" ng-click="changeDocument(true)"> Ok </kendo-button>'+
                    '<kendo-button style="width:62px" ng-click="changeDocument(false)" > Revert changes </kendo-button>'+
                    '</div>' 
                    
            }

            return {
                scope: true,
                template: documentTemplate
            }
        }]
    )

My controller

        $scope.changeDocument = function (applyFilter) {
            if (applyFilter === true) {
            
            //Here is where I cant access $scope
            
            }

        }

Answer 1

Firstly, I see a extra closing curly braces in your directive. Secondly in your html code there is display:none in div with id "includedDocumentsFilter". Just wondering if you are hiding the div, how will you be able to see the template defined in your directive. I have added a working jsfiddle link below using your above mentioned code

dbApp.directive('myDocuments', [
    function () {

            var documentTemplate =
                ' <div class="caption-row">' +
                '<kendo-button style="width:62px" ng-click="changeDocument(true)"> Ok </kendo-button>'+
                '<kendo-button style="width:62px" ng-click="changeDocument(false)" > Revert changes </kendo-button>'+
                '</div>' 


        return {
            scope: true,
            template: documentTemplate
        }
    }]
)

JsFiddle link: https://jsfiddle.net/anilsarkar/gk2dfh1p/21/

Note: I have replaced kendo-button with span in jsfiddle