JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <dashboard frames="iframeSrc"></dashboard>
    </div>
</div>

CSS

iframe{
    width : 600px;
    height : 600px;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('dashboard', function($sce) {
    return {
        restrict : 'E',
        scope:{
                frames:'='
        },
        template:   '<div class="container">'+
                        '<iframe ng-if="renderItems.length > 0"'+
                            'ng-repeat="item in renderItems"'+
                            'frameBorder="0"'+
                            'scrolling="auto"'+
                            'ng-src="{{item.src}}">'+
                        '</iframe>'+
                    '</div>',
        link : function(scope){
            var reloadData = function(){
                scope.renderItems = scope.frames.map(function(src){
                    return { 
                        src :  $sce.trustAsResourceUrl(src),
                    };
                });
            };
            
            scope.$watch('frames', function () {
                    if (scope.frames !== null) {
                        reloadData();
                    }
                }, true);            
        }
    };
});


function MyCtrl($scope) {
    var src1 = ['http://www.bing.com/','http://www.bing.com/'];
    var src2 = ['http://www.positivepictures.net/','http://www.positivepictures.net/'];
    $scope.iframeSrc = src1;
    
    setInterval(function(){
        $scope.$apply(function(){
            $scope.iframeSrc = $scope.iframeSrc[0] === src1[0] ? src2 : src1;
            });
        },3000);
}