Как привязать имя файла, загруженного с помощью ng-flow, к области видимости контроллера, чтобы на него можно было ссылаться в теге ng-src

Question

Я пытаюсь встроить функцию загрузки изображений в мое приложение angularJS с помощью ngflow. Мне удалось заставить его работать так, чтобы я мог загружать изображения в свою папку по выбору (используя php).

Теперь я хочу ссылаться на эти изображения, чтобы я мог включить их в профили пользователей, используя созданный мной ng-src. Эти профили создаются с пользовательской директивой. Я считаю, что мне нужно было бы установить переменную в области контроллеров, равную переменной уникального идентификатора области потока, и тогда я смогу ссылаться на путь к изображению, как мне будет угодно. Однако, когда я пытаюсь сделать это, я получаю неопределенные ошибки - это говорит о том, что я неправильно внедряю область потока в мой контроллер. Мой код ниже. Если у вас есть какие-либо мысли, это было бы здорово.

модуль

//Module - Inject flow
var App = angular.module('App',['ngRoute', 'flow']);

//Routing - Create views and set flow default settings
App.config(['$routeProvider', 'flowFactoryProvider', function ($routeProvider, flowFactoryProvider) {

$routeProvider 

.when('/register-aboutme', {
    templateUrl: 'pages/user-aboutme.html',
    controller: 'userController'
})

flowFactoryProvider.defaults = {
target: './upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true
};

flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
}]);

контроллер

App.controller('userController', ['$scope', '$location', '$log', 'userprof', function($scope, $location, $log, userprof) {

//Attempt to create new property of object equal to recent photo upload
$scope.userprof.photopath = $flow.files[0].uniqueIdentifier;

}]);

//DIRECTIVES
//Creates a directive that shows the current status of the user profile as they register

App.directive("userProfile", function() {
return {
    restrict: 'EC',
    templateUrl: 'directives/userprofile.html',
    replace: true,
    scope: {
        userData: "="
   }
}
});

Обо мне HTML (где пользователь загружает фото)

<div flow-init class="container">
<form ng-submit="submit()">
<div class="form-group">
    <label for="userphoto">Photo</label>
        <div flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message">
            <p class="btn btn-default" type="file" flow-btn>Upload Photo</p>
            <table>
                <tr ng-repeat="file in $flow.files">
                    <td><p>{{file.name}}</p></td>
                    <td><p>{{file.isComplete()}}</p></td>
                    <td><p>{{file.uniqueIdentifier}}</p></td>
                </tr>
            </table>
            <img flow-img="$flow.files[0]" class="userphotoupload"/>
        </div>

</div>

Директива профиля пользователя

<div class="container">
<div class="panel panel-default">                       
<div class="panel-body">
    <div class="row col-md-12">
        <p><img class="userphoto" ng-src="{{ userData.photopath }}">
    </div>
</div>
</div>
</div>

Заранее спасибо!!