angular custom directive inside ng-repeat not perform on second load - angularjs

Question

(function() {
'use strict';
angular.module('app.core').directive('abrRecText', abrRecText);
function abrRecText() {
return {
restrict: 'E',
scope: {
details: '='
},
controller: recTextController,
controllerAs: 'vm',
templateUrl: 'app/abr/abr-directives/abr-templates/abr-rec-text.html'
};
}
})();
Above code is Custom Directive and below view Section
Inside li i'm getting event on the second load, but directive not getting
Onclick of page number calling api and getting response.
<div class="abr-pagination">
<div class="abr-pagination-wrap">
<div class="abr-pagination-split pull-left">
<paging class="small" page="vm.filterData.paging.currentPageNumber" page-size="vm.filterData.paging.pageSize" total="total" ul-class="pagination rmapp" active-class="active" disabled-class="disabled" adjacent="1" app-name="rm" dots="..." show-prev-next="true" show-first-last="true" hide-if-empty="true" paging-action="vm.pageChanged(page)">
</paging>
</div>
</div>
<div class="col-md-12 nopadding table-show-page pagination">
<div class="col-md-2 nopadding abr-pagination-goto goto-page table-go-to pull-left">
<lable> Go to </lable>
<input type="number" aria-invalid="false" ng-model="vm.filterData.paging.currentPageNumber" ng-change="vm.getTableData()" />
</div>
<div class="col-md-4 nopadding abr-pagination-perpage pagination-per-page table-entries pull-left">
<lable class="pull-left">Entries per page </lable>
<div class="pull-left pagination-select-container">
<select ng-model="vm.filterData.paging.pageSize" ng-options="item for item in vm.selectitems" ng-change="vm.getTableData()"></select>
</div>
</div>
</div>
</div>
</div>
<ul>
<li class="inlineblock" ng-repeat="(key,event) in events.recommendationObj track by $index">
<div class="col-md-12 paddingfive">
<abr-rec-text details="[{'cogKey': 'rectext','cogValue': event.recommendedText },{'cogKey': 'startsAt','cogValue': event.startsAt }, {'cogKey': 'isStory','cogValue':false },{'cogKey': 'widgetMasterId','cogValue':events.widgetMasterId },{'cogKey': 'cardIcId','cogValue':event.cardIcId},{'cogKey': 'attrId','cogValue':attrId},{'cogKey': 'widgetId','cogValue':widgetId}]"></abr-rec-text>
</div>
</li>
</ul>
<div class="abr-pagination">
<div class="abr-pagination-wrap">
<div class="abr-pagination-split pull-left">
<paging class="small" page="vm.filterData.paging.currentPageNumber" page-size="vm.filterData.paging.pageSize" total="total" ul-class="pagination rmapp" active-class="active" disabled-class="disabled" adjacent="1" app-name="rm" dots="..." show-prev-next="true" show-first-last="true" hide-if-empty="true" paging-action="vm.pageChanged(page)">
</paging>
</div>
</div>
<div class="col-md-12 nopadding table-show-page pagination">
<div class="col-md-2 nopadding abr-pagination-goto goto-page table-go-to pull-left">
<lable> Go to </lable>
<input type="number" aria-invalid="false" ng-model="vm.filterData.paging.currentPageNumber" ng-change="vm.getTableData()" />
</div>
<div class="col-md-4 nopadding abr-pagination-perpage pagination-per-page table-entries pull-left">
<lable class="pull-left">Entries per page </lable>
<div class="pull-left pagination-select-container">
<select ng-model="vm.filterData.paging.pageSize" ng-options="item for item in vm.selectitems" ng-change="vm.getTableData()"></select>
</div>
</div>
</div>
</div>
</div>
Initially directive is loading, once I click on the second page of pagination button controller is perform and getting response also but the directive is not performing based on the second response.
Any ideas would be appreciated!