title: how to properly use angular-file-upload on a page
body: <p>I need to use angular-file-upload directive (<a href="https://github.com/nervgh/angular-file-upload" rel="nofollow">https://github.com/nervgh/angular-file-upload</a>).</p>
  
  <p>I took the html as well as the controller example as-is from github:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body ng-controller="GeekController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter"&gt;
  &lt;div class="container"&gt;
      &lt;div class="navbar navbar-default"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload"&gt;Angular File Upload&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Demos &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li class="active"&gt;&lt;a href="#"&gt;Simple example&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://github.com/nervgh/angular-file-upload"&gt;View on Github&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://raw.github.com/nervgh/angular-file-upload/master/angular-file-upload.min.js"&gt;Download&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
              &lt;h3&gt;Select files&lt;/h3&gt;
              &lt;div ng-show="uploader.isHTML5"&gt;
                  &lt;!-- 3. nv-file-over uploader="link" over-class="className" --&gt;
                  &lt;div class="well my-drop-zone" nv-file-over="" uploader="uploader"&gt;
                      Base drop zone
                  &lt;/div&gt;
                  &lt;!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" --&gt;
                  &lt;div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }"&gt;
                      &lt;div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone"&gt;
                          Another drop zone with its own settings
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" --&gt;
  
              Single
              &lt;input type="file" nv-file-select="" uploader="uploader" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-9" style="margin-bottom: 40px"&gt;
              &lt;h3&gt;Upload queue&lt;/h3&gt;
              &lt;p&gt;Queue length: {{ uploader.queue.length }}&lt;/p&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th width="50%"&gt;Name&lt;/th&gt;
                      &lt;th ng-show="uploader.isHTML5"&gt;Size&lt;/th&gt;
                      &lt;th ng-show="uploader.isHTML5"&gt;Progress&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                      &lt;th&gt;Actions&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;tr ng-repeat="item in uploader.queue"&gt;
                      &lt;td&gt;&lt;strong&gt;{{ item.file.name }}&lt;/strong&gt;&lt;/td&gt;
                      &lt;td ng-show="uploader.isHTML5" nowrap&gt;{{ item.file.size/1024/1024|number:2 }} MB&lt;/td&gt;
                      &lt;td ng-show="uploader.isHTML5"&gt;
                          &lt;div class="progress" style="margin-bottom: 0;"&gt;
                              &lt;div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class="text-center"&gt;
                          &lt;span ng-show="item.isSuccess"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span ng-show="item.isCancel"&gt;&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span ng-show="item.isError"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/td&gt;
                      &lt;td nowrap&gt;
                          &lt;button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"&gt;
                              &lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; Upload
                          &lt;/button&gt;
                          &lt;button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"&gt;
                              &lt;span class="glyphicon glyphicon-ban-circle"&gt;&lt;/span&gt; Cancel
                          &lt;/button&gt;
                          &lt;button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"&gt;
                              &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Remove
                          &lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      Queue progress:
                      &lt;div class="progress" style=""&gt;
                          &lt;div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length"&gt;
                      &lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; Upload all
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading"&gt;
                      &lt;span class="glyphicon glyphicon-ban-circle"&gt;&lt;/span&gt; Cancel all
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length"&gt;
                      &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Remove all
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>angular.module('GeekCtrl', ['angularFileUpload'])
      .controller('GeekController', ['$scope', 'FileUploader', function($scope, FileUploader) {
          var uploader = $scope.uploader = new FileUploader({
              url: 'upload.php'
          });
  // FILTERS
          uploader.filters.push({
              name: 'customFilter',
              fn: function(item /*{File|FileLikeObject}*/, options) {
                  return this.queue.length &lt; 10;
              }
          });
  // CALLBACKS
          uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
              console.info('onWhenAddingFileFailed', item, filter, options);
          };
          uploader.onAfterAddingFile = function(fileItem) {
              console.info('onAfterAddingFile', fileItem);
          };
          uploader.onAfterAddingAll = function(addedFileItems) {
              console.info('onAfterAddingAll', addedFileItems);
          };
          uploader.onBeforeUploadItem = function(item) {
              console.info('onBeforeUploadItem', item);
          };
          uploader.onProgressItem = function(fileItem, progress) {
              console.info('onProgressItem', fileItem, progress);
          };
          uploader.onProgressAll = function(progress) {
              console.info('onProgressAll', progress);
          };
          uploader.onSuccessItem = function(fileItem, response, status, headers) {
              console.info('onSuccessItem', fileItem, response, status, headers);
          };
          uploader.onErrorItem = function(fileItem, response, status, headers) {
              console.info('onErrorItem', fileItem, response, status, headers);
          };
          uploader.onCancelItem = function(fileItem, response, status, headers) {
              console.info('onCancelItem', fileItem, response, status, headers);
          };
          uploader.onCompleteItem = function(fileItem, response, status, headers) {
              console.info('onCompleteItem', fileItem, response, status, headers);
          };
          uploader.onCompleteAll = function() {
              console.info('onCompleteAll');
          };
          console.info('uploader', uploader);
      }]);
  </code></pre>
  
  <p>When I run this, I get the following error:</p>
  
  <pre><code>"Error: "Uploader" must be an instance of FileUploader
  .link@http://localhost:8080/libs/angular/AngularFileUpload.js:1231:25
  $@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:197
  B@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:255
  g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
  B@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:196
  g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
  g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
  g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
  g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
  D/&lt;@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:441
  ngViewFillContentFactory/&lt;.link@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js:983:7
  $@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:197
  B@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:255
  g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
  D/&lt;@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:441
  P/&lt;@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:52:379
  k@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:56:315
  update@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js:933:17
  Pe/this.$get&lt;/n.prototype.$broadcast@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:128:355
  commitRoute/&lt;@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js:616:15
  f/&lt;@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:98
  Pe/this.$get&lt;/n.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:4
  Pe/this.$get&lt;/n.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:98
  Pe/this.$get&lt;/n.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:291
  l@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:227
  M@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:85:342
  wf/&lt;/F.onload@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:86:367
  " "&lt;div class="well my-drop-zone" nv-file-over="" uploader="uploader"&gt;"
  </code></pre>
  
  <p>What do I need to change to make this work properly?</p>