The ionicModal directive is executed first before the controller is loaded

I have a $ ionicModal and inside that I have a directive, let's call it <scrap-link-cards>

, this takes the bi-directional data binding value of the scope object. This is inside the $ ionicModal template: →

<scrap-link-cards datasource=(updates.update_links)> </scrap-link-cards> 

      

        
        
        
      

    

This is my complete directive:

.directive('scrapLinkCards', function ($log) {
        var controller = function ($scope) {
            $scope.links = angular.copy($scope.datasource); //undefined
            $scope.LastIndex = $scope.links.length - 1;
        };
       var templateUrl ='/path/to/template' ;

        return{
            restrict :'E',
            controller: controller,
            scope: {
              datasource :'='
            },
            templateUrl : templateUrl
        }
    })

      

        
        
        
      

    

This is my template template:

<div class="scrapLinks">
    <h3>{{links[LastIndex].title}}</h3>
    <p>{{links[LastIndex].description}}</p>
</div>

      

        
        
        
      

    

Note that this is inside $ ionicModal:

$ionicModal.fromTemplateUrl('path/to/template/html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function ($ionicModal) {
        $scope.ReadMore = $ionicModal;
});

      

        
        
        
      

    

Now here is my problem, since it is inside $ ionicModal , HTML is executed before angular can access (updates.updates_links). I am getting undefined object in $scope.links

. How can I get around this? I've tried using the directive's link function , (everything moves by logic in the link). I think the $ ionicModal templates are compiled before the controller is loaded? It?