cannot render card view through directive?

[jayeshjain24]

I am trying to append a few cards in my template via a directive.
When I hard code the html and place it inside the template, everything is fine.
But when I append the html through a directive, it does not reflect. So inspect element and verifed that the cards were indeded prepended but were not showing up.

Any idea whats wrong?

STN_MONSTER_MODULE.directive('prependCard', function($compile, $rootScope, notificationFactory, localStorageFactory, sessionStorageFactory, $ionicScrollDelegate, $timeout, ionicMaterialMotion,uxFactory,ionicMaterialInk) {
    return {
        restrict: 'A',
        scope: {
            card: '='
        },
        link: function(scope, element, attr) {
            var target = angular.element(document.querySelector('#feedContainer'))
            scope.$watch('card', function(newValue, oldValue) {
                if (scope.card) {
                    var cardObj = scope.card;
                    //alert('Directive about to append');
                    angular.forEach(cardObj, function(value, key) {
                        if (value.is_read == 1) {
                            var read_status = 'Read';
                        } else {
                            var read_status = 'Unread';
                        }
                        console.log(key + ': ' + value);
                        switch (value.cmd) {
                            case 'REQUESTSONG':       
                                var template = "<h1>CARD REQUESTSONG</h1>";
                                break;
                            case 'PLAYED_SONG':
                                var template = "<h1>CARD PLAYED_SONG</h1>";
                                break;
                            case 'PLAYED_STORY':
                                var template = "<h1>CARD PLAYED_STORY</h1>";
                                break;
                        }
                        var content = $compile(template)(scope);
                        target.prepend(content);
                    });
                    $ionicScrollDelegate.scrollTop(true);
                }
            }, true);
        }
    };
});

This is my template :

<ion-view view-title="Activities">
    <ion-content ng-class="{expanded:$scope.isExpanded}">
<div id="feedContainer" prepend-card card='cardObj'>
</div>
    </ion-content>
</ion-view>

Te cards get appended but screen appears blank?? Any help?

STN_MONSTER_CTRL.controller('homeCtrl', function($scope, $rootScope, $timeout, uxFactory, ionicMaterialMotion, ionicMaterialInk) {
    // Set Header
     uxFactory.showHeader();
     uxFactory.clearFabs();
     $scope.isExpanded = false;
     $scope.$parent.setExpanded(false);
     $scope.$parent.setHeaderFab(false);
    // Set Motion
    $timeout(function() {
         ionicMaterialMotion.slideUp({
             selector: '.slide-up'
         });
     }, 300);
     $timeout(function() {
         ionicMaterialMotion.fadeSlideInRight({
             startVelocity: 3000
         });
     }, 700);
     // Set Ink
     ionicMaterialInk.displayEffect();
});