data-url with {{ uploadUrl }} not swapping in scope url (AngularJS)

Question

I am using jquery fileupload to post a file to a url. In my controller I have something like this to generate the url I am going to post to.

uploadService.getUploadURL($scope.projectId).then(function (url) {
     $scope.uploadUrl = url.uploadUrl;
});

Then in my view I have this to fill in the data-url

<span id="btn-browse" class="btn btn-success btn-file">Browse<input type="file" name="file" data-url="{{uploadUrl}}" multiple upload /></span>

The problem I am running into is that when I post a file it ends up using the url, http://localhost/%7B%7BuploadUrl%7D%7D as it is not replacing {{uploadUrl}}.

I know this is most likely very basic and I am missing something simple. If anyone can help out with this or point me in the right direction I would appreciate it!

** Per the request below for upload code **

From the upload controller

$scope.upload = function () {
    uploadService.upload();
}

From the upload service

upload: function () {
    $.each(_files, function (ix, file) {
         file.submit();
    });
    this.clear();
}

It is also worth mentioning that the jquery fileupload is implemented in a directive like so:

$(element).fileupload({
    dataType: "text",
    add: function (e, data) {
         uploadService.add(data);
    },

    progressall: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         uploadService.setProgress(progress);
    },

    done: function (e, data) {
         uploadService.uploadDone();
    }
});

Answer 1

Even though you have created a directive , when file upload is created the url is not loaded yet.

What you can do is to add watch inside the directive for uploadUrl and if it has changed it's value create the file uploader using jquery.

$scope.watch('uploadUrl',function(newValue, oldValue ){
   if(newValue!==oldValue){
    setTimeout(function(){
       $(element).fileupload({
        dataType: "text",
        add: function (e, data) {
           uploadService.add(data);
         },

         progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            uploadService.setProgress(progress);
         },

         done: function (e, data) {
            uploadService.uploadDone();
         }
     });
    });
   }
});