Ionic infinite scrolling, only scrolls when navigated away and back to page

I have a ionic content with a ionic list in it.

Here is my HTML:

<ion-content>
<ion-view>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
    <a class='normala' href="#/tab/dash/{{maanta.id}}">
    <div class='cardHeader item-text-wrap'>
    {{maanta.title}}
    </div>
    <hr class='divi'>
    <div class='cardDivider item-text-wrap'>
    {{maanta.source}} - {{maanta.pub_date}}
    </div>
    <hr class='divi'>
    <div class='cardBody item-text-wrap'>
    {{maanta.summery}} 
    </div>
</a>
</div>    </ion-list>

    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

</ion-content>
</ion-view>

Here is my JS:

$scope.limit = 10;
$scope.loadMore = function() {
    $scope.limit +=10
    if ( $scope.maanta.length <$scope.limit) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

The problem

When I first land on the page the infinite scrolling doesn't change limit for my ng-repeat. When I navigate away to another page and come back the infinite loop works as expected.

Check out your HTML. There's a mistake in the tag sequence :

<ion-content>
    <ion-list >
        <div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
            <a class='normala' href="#/tab/dash/{{maanta.id}}">
                <div class='cardHeader item-text-wrap'>
                    {{maanta.title}}
                </div>
                <hr class='divi'>
                <div class='cardDivider item-text-wrap'>
                    {{maanta.source}} - {{maanta.pub_date}}
                </div>
                <hr class='divi'>
                <div class='cardBody item-text-wrap'>
                    {{maanta.summery}} 
                </div>
            </a>
        </div>    </ion-list>

    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>

The tag <ion-view> was not required as such.

I think you should reconsider your approach and try to push the new content to your view. The key is pushing the new content.

Fore example (from user DILIP on codepen:)

<ion-infinite-scroll distance="2"
       on-infinite="loadMoreData()"
       ng-if="!moredata"  >
</ion-infinite-scroll>

var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",function($scope)
{
$scope.moredata = false;

$scope.loadMoreData=function()
{
    $scope.items.push({id: $scope.items.length});
    if($scope.items.length==100)
    {
        $scope.moredata=true;
    }
  $scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.items=[];
});

Here's the link to the codepen: http://codepen.io/d4dilip/pen/rkxyA