Call Controller function from the directive in angular JS

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>