Ionic Navigation not working for new loaded list items


I am new to Ionic so my question might be basic. I am implementing an
application using tabs and lists. My navigation works for the first
time I load the application. i.e. I can click on the first 10 list items
and it navigates me correctly to a single page with some more details.

However upon loading more data using infinite scrolling, the
navigation fails to work properly from the 11th item to the rest I can
navigate but no details are displayed in the page I navigate to. Below
is my code so far.

In my controller

.controller('AllAdsCtrl', ['$scope', '$http', '$state', function ($scope, $http, $state) {
      $scope.allads = [];
                    $scope.allads = data;
                    $scope.last = $scope.allads[$scope.allads.length-1].id;
                .error(function() {
                $scope.allads = "error in fetching data";
      $scope.loadMore = function() {

        $http.get('http://localhost/android/getAdsForIonic.php?startHere='+$scope.last).success(function(items) {
         $scope.allads = $scope.allads.concat(items);
          $scope.last = $scope.allads[$scope.allads.length-1].id;

In my route I have

.state('tab.detail', {
      url: '/home/:adId',
      views: {
        'tab-home': {
          templateUrl: 'templates/ad-detail.html',
          controller: 'AllAdsCtrl'

In ad-detail.html I have

<ion-header-bar class="bar-positive">
<h2 class="title">Ad Information</h2>
  <ion-content class="padding">
  <ion-list class="list-inset" ng-repeat="ad in allads | filter : {id : clickedad}">
  <ion-item class="item-text-wrap">
      <h2>Title : {{ad.title}}</h2> 
    <img ng-src="http://localhost/{{ad.image_path}}" width="100px">
      <h2>Price : {{ad.price}}</h2> 
      <h3>Description : {{ad.description}}</h3>