Угловые облачные рельсы

Question

Я пытаюсь использовать облачный с угловым, как в данном примере

Когда страница загружена, я могу увидеть оба console.log(), но когда я загружаю файл, ничего не происходит. Я не получаю никакой ошибки консоли, и не выводится console.log(), который я добавил в $ watch. Я что-то здесь не так делаю?

Также, как видно из примера по ссылке, эта кнопка загрузки добавляет добавленное событие, которое не относится ко мне, не в этом ли проблема?

Мое приложение

var myApp = angular.module('myApp', [
  'ngRoute', 'ngResource', 'ngInflection', 'templates', 
  'cloudinary','angularFileUpload'])

Мой контроллер

myApp.controller('LocationUpdate', ['$scope', '$rootScope', 
  '$resource', '$http', '$location', '$routeParams', '$upload',
  function($scope, $rootScope, $resource, $http, $location, 
  $routeParams, $upload){
    console.log("in controller");
    // here i have added a listener which is not getting invoked
    $scope.$watch('files', function() {
      console.log('in watcher');
    }
  }]);

Мой код шаблона в хамле

#direct_upload{"ng-file-drag-over-class" => "", "ng-file-drop" => "", "ng-model" => "files", "ng-multiple" => "true"}
  .upload_button_holder
    .upload_button{:href => "#", "ng-file-select" => "", "ng-model" => "files", "ng-multiple" => "true", :resetonclick => "true", :title => "upload"} Upload

Мое application.js

//= require jquery
//= require jquery_ujs
//
//= require cloudinary
//= require jquery.cloudinary
//= require angular-file-upload-shim.min
//= require angular
//= require angular-animate
//= require angular-route
//= require angular-resource
//= require angular.cloudinary
//= require angular-file-upload.min
//= require ./angular-ui-router.min
//= require angular-sanitize
//= require angular-ui-bootstrap
//= require angular-ui-bootstrap-tpls
//= require angular-rails-templates
//= require angular/my_app
//= require_tree .


$.cloudinary.config().cloud_name = 'XXXXXXX';
$.cloudinary.config().upload_preset = 'XXXXXX';