AngularJS - Что не так с этой директивой, которую я хочу вызвать при загрузке

Я создал директиву, потому что я хочу сделать некоторые манипуляции с DOM при загрузке страницы. Но это просто не вызовет. Вот моя директивная функция: Директива

function onLoadFixes(){
    return function (scope,element,attrs){
        $(element).on('load',function(event){
                console.log("element loaded");
                $(".breadcrumb-igdm").append($("#idBreadcrumbs").children());
                $("input").val(copyURLtoClipboard());
        });}
}

Вот как это отображается

.directive("uponLoadFixes", onLoadFixes)

HTML

<header class="header" ng-include="'partials/header.html'">
</header>
<div id="idBreadcrumbs" ng-show="false">
    <li class="active">{{phase.title}}</li>
</div>
<div role="main" style="margin-top:110px">
    <a role="button" href="javascript:;" ng-model="collapsedMap" ng-click="collapsedMap=!collapsedMap">
        <h4 style="color: #7D0DD0;">PROJECT PHASE {{phase.title}}</h4>
    </a>
    <div id="divMap" style="border: 1px solid grey;width: 98%;border-radius: 4px;padding:3px">
    <upon-load-fixes></upon-load-fixes>
        <table ng-show="collapsedMap" style="width:100%">
            <tbody>
                <tr ng-repeat="stream in streams|myMapFilter:'order'" style="height: 30px">
                    <td ng-style="{'width':'20%','padding-top':'1px'}" class="phase-stream-column-div">
                        <div ng-style="{'background-color':stream.color,'margin-top':'2px'}" class="content-center-flex">
                            {{stream.title}}</div>
                    </td>
                    <td class="phase-stream-column-div" style="padding-left: 2px !important;padding-top:2px !important">
                        <div ng-style="{'background-color':stream.color,'cursor':'pointer'}" ng-repeat="stage in stages(stream.ukey).stages" ui-sref="stage" ng-click="openStage(stage)" class="content-center-flex">
                            {{stage.title}}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Любые указатели приветствуются.

header.html

<div class="navbar navbar-fixed-top">
    <table class="table" style="width: 100%;margin-bottom: 0px;background-color: white" role="presentation">
        <tbody>
            <tr style="border-bottom-style: solid; border-bottom-color: rgb(192, 192, 192)">
                <td style="width: 10.0%;"><img alt="" src="img/iGDM_119_50.jpg"></td>
                <td style="background-color: rgb(0, 64, 128)"><span style="text-align: left;vertical-align: "><span
                style="nowrap: nowrap; width: 100%; text-align: right; font-weight: bold; color: rgb(255, 255, 255); font-size: 16pt"
            >Page Name</span> </span>
                </td>
                <td style="width: 10.0%;"><img alt="" src="img/hcl_logo_50.jpg"></td>
            </tr>
        </tbody>
    </table>
    <div style="height: 30px;background-color: #f5f5f5;border-bottom: 1px solid grey;">
        <ol class="breadcrumb pull-left breadcrumb-igdm">
            <li><a href="#"><i class="fa fa-home" style="font-weight: 16px"></i>&nbsp;Home</a></li>
            <li><a href="#">Waterfall</a></li>
            <upon-load-fixes></upon-load-fixes>
        </ol>
        <ul class="list-inline pull-right breadcrumb">

            <li ngclipboard data-clipboard-target="#copyurl">
            <input type="text" id="copyurl" value=""><a href="javascript:;"><i class="fa fa-link" style="font-weight: 16px"></i>&nbsp;Copy URL</a></li>
            <li ng-click="open()"><a href="#"><i class="fa fa-comment-o" style="font-weight: 16px"></i>&nbsp;Feedback</a></li>
            <li><a href="#"><i class="fa fa-question-circle" style="font-weight: 16px"></i>&nbsp;Help</a></li>
        </ul>

    </div>
</div>

Новая директива

( function(angular) {
    'use strict';

    var uponLoadFixes = function() {
        function controller() {

        }

        function link(scope, element, attrs) {
            console.log("doing something " + copyURLtoClipboard());
            element.append(angular.element(document.querySelector("#idBreadcrumbs")).children());
            angular.element(document.querySelector("#copyurl")).val(copyURLtoClipboard()); // get this function into the directive as well or make it a service

        }

        return {
            restrict : 'E',
            link : link,
            controller : controller,
            scope : {}
        };
    };

    angular.module('myMappy').directive('uponLoadFixes', [ uponLoadFixes ]);
})(angular);