AngularJS ngInfiniteScroll doesn't work

Question

I am trying to use use ngInfiniteScroll. But it doesn't work. Can anyone explain what I am doing wrong

post.html - list of posts where scroll suppose to be triggered

<div infinite-scroll="getMoreData()">
<article ng-repeat="post in posts" class="postContainer">
    <img  src="{{post.media.m}}" />
    <h2><a href="#/post/{{ posts.indexOf(post) }}">{{ post.title }}</a></h2>
</article>
</div>

controller.js

angular.module('app.controllers', [
'app.directives'])
.controller('PostController', ['$scope', '$http', function($scope, $http){
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?tags=flower&tagmode=all&format=json').success(function(data){
    });
    jsonFlickrFeed = function(data){
        $scope.posts = data.items.slice(0, 5);
    }

    $scope.getMoreData = function () {
        console.log("scroll");
        $scope.posts = $scope.posts.slice(0, $scope.posts.length + 5);
    }   
}])

Scroll is triggered, but no data is added to page

UPDATE

problem solved when I changed this

    jsonFlickrFeed = function(data){
        $scope.posts = data.items.slice(0, 5);
        $scope.getMoreData = function () {
        $scope.posts = data.items.slice(0, $scope.posts.length + 5);
        }
    }