AngularJS directive $http is not defined

I’m using angular js to load data into the table when scrolling to the bottom of the div.

I got $http is not defined error. Please help to check where to inject the $http?

html

    <div class="bs-component" ng-app="myApp" ng-controller="customersCtrl" style="max-height: 400px;overflow-y: scroll;" scrolly="showMore()">
        <div class="row">
            <table class="table table-striped table-hover" id="news_table" >
                 <tr ng-repeat="x in names">
                    <td>@{{ x.title }}</td>
                    <td><a href="@{{x.url}}" target="_blank">@{{ x.title }}</a></td>                       
                  </tr>
            </table>
        </div>
    </div>

Javascript

var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("/news")
        .then(function (response) {$scope.names = response.data;});
    });

    app.directive('scrolly', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                //console.log(element);
                var raw = element[0];
                console.log('loading directive');

                element.bind('scroll', function () {
                    // console.log("raw.scrollTop + raw.offsetHeight : "+(raw.scrollTop + raw.offsetHeight));
                    // console.log("raw.scrollHeight is " + raw.scrollHeight);
                    if (raw.scrollTop + raw.offsetHeight == raw.scrollHeight) {
                        console.log("I am at the bottom");
                        // scope.$apply(attrs.scrolly);
                        $http.get("/news")
                        .then(function (response) {
                            $scope.names.push(response.data);
                        });
                    }
                });
            }
        };
    });

Source: AngularJS