How to append directives based on conditions

Question

I have 2 different directives. The first one is returns an iframe with a live video, and the second returns an iframe with a recent video.

The condition is: if live content is present, append live directive, else append recent video directive.

Ive tried with normal html instead of the directives and it works, but when i put the directive element, unfortunately doesnt work.

WORKING

controller.js

function isLiveOn() {

    var liveIframe = '<h2>LIVE</h2>';
    var videoIframe = '<h2>VIDEO</h2>';

    if (vm.live.items[0] != undefined) {
        $('.iframe-container').append(liveIframe);
    } else {
        $('.iframe-container').append(videoIframe);
    }

};

NOT WORKING

controller.js

function isLiveOn() {

    var liveIframe = '<live-iframe live="vm.live.items[0]"></live-iframe>';
    var videoIframe = '<last-video video="vm.activity.items[0]"></last-video>';

    if (vm.live.items[0] != undefined) {
        $('.iframe-container').append(liveIframe);
    } else {
        $('.iframe-container').append(videoIframe);
    }

};

Each directive has its own html and js file. Something like that:

directive.html

<div class="live">
    <iframe ng-src="{{getIframeSrc(live.id.videoId)}}"></iframe>
</div>
<div class="live-description">
    <h4>{{live.snippet.title}}</h4>
</div>

directive.js

app.directive('live', live);

live.$inject = ['$window'];

function live($window) {

    var directive = {
        link: link,
        restrict: 'EA',
        templateUrl: 'path',
        scope: {
            live: '='
        }
    };

    return directive;

    function link(scope, element, attrs) {
        scope.getIframeSrc = function(id) {
            return 'https://www.youtube.com/embed/' + id;
        };
    }
} 

So im thinking its some problem with the directives that im probably missing. Any help will be appreciated!

Answer 1

Instead of handling the logic in the controller you can control it in UI as it will be easier.

-----Other Html Codes-----
<live-iframe ng-if="vm.live.items[0]" live="vm.live.items[0]"></live-iframe>
<last-video ng-if="!vm.live.items[0]" video="vm.activity.items[0]"></last-video>
-----Other Html Codes-----

And you can remove following lines of code from the controller

var liveIframe = '<live-iframe live="vm.live.items[0]"></live-iframe>';
var videoIframe = '<last-video video="vm.activity.items[0]"></last-video>';

if (vm.live.items[0] != undefined) {
    $('.iframe-container').append(liveIframe);
} else {
    $('.iframe-container').append(videoIframe);
}