AngularJS with Angular-ui-router and jQuery-File-Upload

Question

I am using angular-ui-router to control my states in my AngularJS application. In one partial I use jquery-file-upload. The problem that I have is that when I use the example given by jquery-file-upload, is that it defines the controller in the template like this:

<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" 
  enctype="multipart/form-data" data-ng-app="demo" 
  data-ng-controller="DemoFileUploadController" data-file-upload="options" 
  data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
... 
</form>

The form tag has data-ng-controller="DemoFileUploadController". In my controller this creates all the file upload methods needed (like $scope.submit() and $scope.queue)

The problem is that I define my controllers angular-ui-router style, like this in my app.js:

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html", 
      controller: 'DemoFileUploadController' 
    },
  }
})

But this piece of code causes my file upload methods, not to be loaded (or bound) in my controller (there is no $scope.submit() and $scope.queue).

Is there a way I can use angular-ui-router and jquery-file-upload together?

Answer 1

My fix is to simply omit the controller when defining the state:

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html"
    },
  }
})

This way I assign the controller in my template (like in the example data-ng-controller="DemoFileUploadController"). I am still looking for a way to assign my controller via the stateProvider.