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="myController">
        <input type="text" ng-model="frameUrl" /><br/>
        
        <iframe my-src="{{frameUrl}}" id="someId" width="100%" height="100%" class="someclass" frameborder="0" ></iframe>
    </div>
</div>

CSS

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

JavaScript

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

myApp.directive('mySrc', function() {
    return {
        restrict: 'A',

            scope: {
                mySrc:'@'
            },
            link: function (scope, iElement, iAttrs) {
                scope.$watch('mySrc',function(){
                    var iFrame = iElement;
                    if (!(iFrame && iFrame.length > 0)) {
                        iFrame = $('<iframe></iframe>');
                        iElement.append(iFrame);
                    }
                    iFrame.attr("src", scope.mySrc);
                });

            }
    };
});

myApp.controller("myController",function($scope){

    $scope.frameUrl = 'http://www.bing.com';

})