How to Preload Images using AngularJS & CreateJS

I am trying to initialize an app by having all the media load before the app starts. However I am not quite sure of how do this using the AngularJS framework using the CreateJS framework to handle the preloading. The below does NOT work. The goal is for all the images and sound to load while the animated .gif loading_circle_black.gif is displaying and then swap it out when the loading of all media is complete with the slide_4.png (or other) image files.

Trust that the below AngularJS controller initializes properly and displays the first animated gif. The question is how should I model the image in html so that the image can be swapped.

JavaScript

ControllerLibrary.prototype.MainStageController = function($scope) {
$scope.imageFile = "loading_circle_black.gif";    
$scope.status = "loading";

var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete", handleComplete);
queue.loadFile({id: "sound_4", src: "/sounds/slide_4.mp3"});
queue.loadManifest([{id: "slide_4", src: "/img/slide_4.png"}]);

function handleComplete() {
    //createjs.Sound.play("sound_4");
    //var image = queue.getResult("/img/slide_4.png");
    $scope.imageFile = '/img/slide_4.png';
    $scope.status = "complete";
}

HTML

<body style="background-color: black;color: whitesmoke;">
    <div id="main" ng-controller="MainStageController" >
        <center>
            <!--<img id="loadingCircle" src="/img/loading_circle_black.gif"/>-->
            <img ng-src="/img/{{imageFile}}"/>
            <h2>{{status}}</h2>
        </center>
    </div>
</body>

Solution

Most probably the call to handleComplete is called outside the angular context so you need to do $scope.$apply(). Try this

function handleComplete() {
    $scope.$apply(function() {
       //createjs.Sound.play("sound_4");
       //var image = queue.getResult("/img/slide_4.png");
       $scope.imageFile = '/img/slide_4.png';
       $scope.status = "complete";
    }
});