Динамический путь src с CSS-анимацией

Я попытался сделать img динамическим путем. Общее решение, казалось, использовало

 document.getElementById();

Я сделал это, но у меня возникла проблема: мой контроллер был вызван до того, как был загружен html, и я получаю сообщение об ошибке, потому что идентификатор ничего не имел в виду. Я понял проблему, и решения, казалось, были

1) Поместите скрипт в

 <script> 

на странице. Это должно работать, но я хочу вызвать getElementById() в моем контроллере, поскольку путь, который я хочу сделать, зависит от параметров (это фактически контроллер uibmodal). Следовательно, поскольку я не могу передать параметры с контроллера на скриптовый скрипт в моем HTML, это уже не решение.

2) Я также попытался использовать window.onload(), но когда я это пробую, функция onload не вызывается вообще. Кроме того, я помню, что пытался это сделать, и даже когда функция была вызвана, было слишком поздно, потому что img нужно использовать в анимации.

Я как бы не испугался и действительно не понимаю, что делать. Я работаю с угловыми, поэтому я не пробовал решение на основе JQuery, но я подумал, что нет причин, по которым они были более важны, чем window.onload.

Кто-нибудь знает, как решить эту проблему?

(function() {
    'use strict';

    angular
        .module('objectifDtyApp')
        .controller('MyBadgeController',MyBadgeController);

            MyBadgeController.$inject = ['$uibModalInstance', '$state', '$stateParams', 'BadgeView', 'items', 'Lesson'];

            function MyBadgeController($uibModalInstance, $state, $stateParams, BadgeView, items, Lesson) {
            var vm = this;


            console.log(items);

            vm.blocName = items.title;
            vm.ImagePath = items.path;
            console.log(vm.ImagePath);

            window.onload = function(){
                console.log("called");
                var img =document.getElementById('ImgBadge');
                img1.src= vm.ImagePath;

            };


            function clear () {
                $uibModalInstance.dismiss('cancel');
            }

             vm.close = function() {

             $uibModalInstance.close(true);
             //$state.go('viewCourse', {id: $stateParams.idLesson});
             }
         }
    })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
<div class="Badge_logo-demo">
    <img ng-click="vm.close()" src="" alt="Badge_logo" id= "ImgBadge" class="Badge_logo">
    <h2 class="Badge_byline" id="Badge_byline"> You successfully did the Block {{vm.blocName}} </h2>

</div>
</div>

Вот фрагмент, он явно не работает, но он должен показывать мой код. Я не ставил CSS, так как он не имеет значения. Но если есть решение, его можно проверить с помощью этого фрагмента, поместив абсолютный путь изображения в vm.ImgPath.

Я точно знаю, что все называется при открытии uibmodal, так что это не о том, чтобы забыть ng-контроллер или что-то еще. {{BlocName}} работает и на меня.