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?


    <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>                       


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

    app.directive('scrolly', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                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);
                        .then(function (response) {

Source: AngularJS