Call Controller function from the directive in angular JS - angularjs

Question

I am using angular JS right now, in the i am using ui-bootstrap typeahead
I am trying scroll on demand logic in typeahead
i have tried this:
HTML:
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" maxlength="5" typeahead="country.name for country in countries | filter:$viewValue | limitTo:8">
</div>
JS:
angular.module('plunker', ['ui.bootstrap'])
.controller('TypeaheadCtrl', function ($scope) {
$scope.selected = undefined;
$scope.countries = [
{ name: "Afghanistan", code: "AF" },
{ name: "Aland Islands", code: "AX" },
{ name: "Albania", code: "AL" },
{ name: "Algeria", code: "DZ" },
{ name: "American Samoa", code: "AS" },
{ name: "Andorra", code: "AD" },
{ name: "Angola", code: "AO" },
{ name: "Anguilla", code: "AI" },
{ name: "Antarctica", code: "AQ" },
{ name: "Antigua and Barbuda", code: "AG" },
{ name: "Argentina", code: "AR" },
{ name: "Armenia", code: "AM" },
{ name: "Aruba", code: "AW" },
{ name: "Ascension Island", code: "AC" },
{ name: "Australia", code: "AU" },
{ name: "Austria", code: "AT" },
{ name: "Azerbaijan", code: "AZ" },
{ name: "Bahamas", code: "BS" },
{ name: "Bahrain", code: "BH" },
{ name: "Bangladesh", code: "BD" },
{ name: "Barbados", code: "BB" },
{ name: "Belarus", code: "BY" },
{ name: "Zimbabwe", code: "ZW" }
];
$scope.call= function(){
alert('reached end');
};
})
.directive('ul', function () {
return {
restrict: 'E',
link: function ($scope, element, attrs) {
element.bind('scroll', function (e) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// alert('end reached');
$scope.call();
}
})
}
}
});
But in the above try $scope.call(); function is not calling. Any one pls help me
REFERENCE PLUNKER
My actual requirement is when the scroll reaches the end, remaining records has to show in the typeahead

Answer 1

Make these changes to your directive, add a callBack scope variable in directive and add a callBack attribute in HTML , type function
.directive('ul', function () {
return {
restrict: 'E',
scope: {
callBack:"&"
}
link: function (scope, element, attrs) {
scope.callBack();
})
}
}
<div ul callBack="functionName"></div>