Update tabs on angular js with dropzone on success

Question

I am using Inspinia admin theme on a website. I have ui bootstrap angular tabs on one of which I use dropzone js. I used a custom directive and on the controller I want on success to update the current tab. Even though angular variables are updated correct I need to click somewhere on the tabs for it to show the new values.

Html

 <tabset>
    <tab heading="Tab 1" ng-attr-active="vm.tabs[0].active">
       <div class="panel-body col-sm-12">
           <div ng-if="!vm.isResultsLoaded">
               <form class="dropzone" drop-zone="dropzoneConfig" id="dropzone">
                  <button id="submitFile" ng-click="vm.update()" type="submit" class="btn btn-primary pull-right">Submit this form!</button>
               </form>
            </div>
            <div class="table-responsive" ng-if="vm.isResultsLoaded">
                  <button class="btn btn-primary" ng-click="vm.switchToUpload()" type="submit">Ladda mer filer</button>
            <table class="table">
                        ...
            </table>
          </div>
       </div>
     </tab>
 </tabset>

Directive

function dropZone() {
   return function (scope, element, attrs) {
      var config = scope[attrs.dropZone];

      // create a Dropzone for the element with the given options
      var dropzone = new Dropzone(element[0], config.options);

      // bind the given event handlers
      angular.forEach(config.eventHandlers, function (handler, event) {
         dropzone.on(event, handler);
      });
   };
}

Controller

 function tabListController(uploadService, $state, $scope) {
  ...

  $scope.dropzoneConfig = {
     "options": {
        "url": "/api/system/fileupload",
        "method": "post",
        "autoProcessQueue": false
     },
     "eventHandlers": {
        "addedfile": function (file, xhr, formData) {
           var myDropzone = this;
           $('#submitFile').click(function () {
               myDropzone.processQueue();
           });
        },
        "success": function (file, data) {
           vm.results = data;
           vm.isResultsLoaded = true;
        }
     }
  };
}

Any ideas what I should do to fix it?

Answer 1

I can't speak to exactly why this happens in angular for certain levels of callbacks and what not (still new and learning), but basically if the angular objects are updated outside of the digest cycle, they don't get respected in the front end.

Good news is you can force it.

Change success to:

$scope.$apply(function () {
    vm.results = data;
    vm.isResultsLoaded = true;
});

In my case I actually passed in a function I made called updateModels(response), but I think just declaring the function inside may work as well.