Dropzone becomes inactive when used in AngularJS ng-view - angularjs

Question

I have a controller that displays images via a template that is passed through ng-view and runs smoothly. I also have dropzone up and running and working smoothly. However, as soon as I add dropzone to the template the dropzone is no longer active. It displays (the zone isn't clickable unless I manually add dz-clickable, but still does nothing).
I could add the dropzone in a ng-include above the area and have it hidden when the template is looking elsewhere but have heard that ng-include uses more processor than ng-view so would prefer to keep it all together.
I have seen that there is a dropzone angularjs directive but have not managed to merge it successfully with my controller that gets placed into the ng-view or if that would even be successful?
Here is the directive:
(function(){
angular.module('dropZone', [])
.directive('dropZone', function() {
return function(scope, element, attrs) {
element.dropzone({
url: "/upload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
scope.files.push({file: 'added'}); // here works
this.on('success', function(file, json) {
});
this.on('addedfile', function(file) {
scope.$apply(function(){
alert(file);
scope.files.push({file: 'added'});
});
});
this.on('drop', function(file) {
alert('file');
});
}
});
}
});
}());
and here is my current controller:
(function() {
'use strict';
angular
.module('app')
.controller('CustomController', CustomController);
CustomController.$inject = ['api'];
function CustomController(api) {
var vm = this;
api.getDesigns()
.then(function(data) {
vm.designs = data;
});
}
}());

Answer 1

Found my own answer. Rather than adding the dropzone hard coded into the template I just programmatically added the dropzone within the controller scope function using :
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});