Angular Cloudinary Rails

Question

I am trying to use cloudinary with angular as per given example

When page is loaded then I can see both console.log() printed, but when I am uploading a file then nothing happens. I am not getting any console error and no console.log() is printed which I have added in $watch. Am I doing anything wrong here?

Also we can see from the example from the link, this upload button gets an on-click event added, that isn't case with me, is that the issue?

My App is

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

My Controller is

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');
    }
  }]);

My template code in haml is

#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

My application.js is

//= 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';