AngularJS and Iframe

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="btn-group" style='padding-bottom: 10px;'>
    <button class="btn btn-success" ng-click="inc()">+</button><button class="btn btn-danger" ng-click="dec()">-</button>
</div>
<iframe src="https://ep.halla.com/Workflow/Work/Read/00004K4MIX6XOT2?UserId=00002.H0000055216&amp;Language=KOR&amp;mode=hideui" width="100%" height="400px" update-body-style="{'font-size': '{{fontSize}}pt'}" onLoad="javascript:alert('test');">
<script>alert('test'); </script>  
</iframe>

JavaScript

var App = angular.module('App', []);
App.run(function($rootScope) {
    $rootScope.fontSize = 15;
    
    $rootScope.inc = function() {
        $rootScope.fontSize++;
    };
    
    $rootScope.dec = function() {
        $rootScope.fontSize--;
    };
});

App.directive('updateBodyStyle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var $body = $(element).contents().find('body');
            
            $(element).load(function() {
                // cached body element overrides when src loads
                // hence have to cache it again            
                $body = $(element).contents().find('body');
                $body.css(scope.$eval(attrs.updateBodyStyle));
            });
            
            attrs.$observe('updateBodyStyle', function(value) {
                $body.css(scope.$eval(value));
            }, true);
        }
    };
});