AngularJS - Call Controller function from Directive
<p><strong>HTML</strong></p>

<pre><code>angular.element(document.querySelector('#dateControls')).append($compile("&lt;search-date&gt;&lt;/search-date&gt;")($scope));
</code></pre>

<p><strong>Directive</strong></p>

<pre><code>myApp.directive('searchDate', function ($compile, $rootScope,$timeout) {
    var linker = function (scope, element, attrs) {

            var template =  '&lt;button class="btn btn-default" ng-click="dateSearch() id="playbackSearch" search-date"&gt;Search&lt;/button&gt;';

            element.html(template);
            $compile(element.contents())(scope);

    };
    return {
        restrict: "EA",
        replace: true,
        link: linker
    };
});
</code></pre>

<p><strong>Controller</strong></p>

<pre><code>$scope.dateSearch = function(){

    scope.userId = 1;
    myModuleService.getData(userId) //call service
    then(function (data) {
    console.log(data);

    }).catch(function (error) {
        throw error;
    });
};
</code></pre>

<p>How do I call function <code>dateSearch()</code> defined in my controller ?</p>