How to bind the name of a file uploaded using ng-flow to a controller's scope, such that it can be referenced in a ng-src tag

Question

I am trying to build an image upload functionality into my angularJS app using ngflow. I have managed to get it working such that I can upload images to my folder of choice (using php).

What I now want to do is to be able to reference these images so that I can include them in a profiles of the user, using ng-src, that I am creating. These profiles are created with a custom directive. I believe that what I would need to do is to set a variable within the controllers scope equal to the flow scope unique identifier variable and then I would be able to reference the image path as I please. However, when I try to do this I get undefined errors - suggesting that I am injecting the flow scope into my controller incorrectly. My code is below. If you do have any thoughts it would be great.

Module

//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);
});
}]);

Controller

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: "="
   }
}
});

About Me HTML (Where User Uploads Photo)

<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>

User Profile Directive

<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>

Thanks in advance!!