ng-file-uploadを使用した画像のアップロードがループの中で動作せず困っています

Question

JavaScriptベースのフロントエンドアプリケーションとして AnuglarJS を使用して
サーバ側のデータを操作する為にバックエンドAPIを Rails で構築しているのですが、
ng-file-uploadを採用した画像のアップロードが上手く出来なくて困っています。

Shop(1) <-> Item(n)

1件のShopに複数のItemが紐付いている状態で、Shopのedit画面で画像のアップロードを実装しています。
itemリストのループの中でそれぞれのitemに画像を登録させたいですが、ループの中では適切にアップロードができません。
(厳密にはcontrollerの $scope.upload = (files) -> が呼び出されません。。)

また、現状ではそれぞれのitemごとに画像を設定することができなくて詰まっています。。
APIを通してDBには正しく格納できているのでページをリロードすればきちんと表示されるのですが、
img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"
がすべてのinputに対して共通のために、関係のないitemのimgが上書きされていしまいます。

一度に複数の画像アップロードや画像以外のアップロードは求めていなく、
いたってシンプルなものをつくろうとしているのですがなかなか上手くいきません...
どうかご教授いただけますと嬉しいです。

application.js

//= require angular.min
//= require angular-resource.min
//= require ng-file-upload.min
//= require ng-file-upload-shim.min
//= require app
//= require_tree .

controller.coffee

angular.module('app').controller "ArticleEditController", ($scope, Upload, Shop, Item) ->

  $scope.init = ->

  $scope.$watch 'files', ->
    $scope.upload $scope.files
    return

  $scope.upload = (files) ->
    if files and files.length
      alert "success"
      i = 0
      while i < files.length
        file = files[i]
        $scope.upload = Upload.upload(
          url: '/api/shops/1/items'
          method: 'POST'
          # shop_idを動的に渡せていないので一時的にベタ書きしています
          fields: 'item[shop_id]':'1'
          file: file
          fileFormDataName: 'item[image]')
        i++
      return

edit.html.slim

# ループの外では適切にアップロードされる
section
  p select file:
  input type="submit" value="ファイルを選択" ngf-select="" ng-model="files"
  img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"
section
  p select file:
  input type="submit" value="ファイルを選択" ngf-select="" ng-model="files"
  img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"
section
  p select file:
  input type="submit" value="ファイルを選択" ngf-select="" ng-model="files"
  img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"

# ループの中では $scope.upload = (files) -> が呼ばれない...
ul ng-repeat="item in shop.items"
  p select file:
  input type="submit" value="ファイルを選択" ngf-select="" ng-model="files"
  img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"

Answer 1

似たような事例がstacoverflowで回答されています。こちらで解決できないでしょうか？
http://stackoverflow.com/questions/31313845/angularjs-ng-file-upload-not-working-inside-ng-repeat

Comments

[退会済みユーザー]

回答ありがとうございます。こちらの事例で回答されているものでは解決できませんでした...

[chiku_]

ng-model="files"
を
ng-model="item.files"
にするだけでなく、
$scope.$watch 'item.files', ->
を追加されていますか？
またitem.filesはng-repeatされる前に定義済みの状態でしょうか？

[退会済みユーザー]

ご回答ありがとうございます。"item.filesがng-repeatされる前に定義済みの状態" というのがいまいち分かりませんがご回答いただいた点を受けて以下のようにしています。しかしながら Cannot read property 'files' of undefinedとなり $scope.upload = (item) -> が呼ばれない状態です(画像のプレビューまでは問題なく行えています)。

[edit.html.slim]
section ng-repeat="item in shop.items"
p select file:
input type="submit" value="ファイルを選択" ngf-select="" ng-model="item.files"
img ngf-src="item.files[0]" ngf-default-src="" ngf-accept="'image/*'"

[controller.coffee]
$scope.$watch 'item.files', ->
$scope.upload $scope.item.files
return

$scope.upload = (item) ->
if item.files and item.files.length
alert "upload start"
file = item.files[0]
$scope.upload = Upload.upload(
url: '/api/shops/1/items'
method: 'POST'
# shop_idを動的に渡せていないので一時的にベタ書きしています
fields: 'item[shop_id]':'1'
file: file
fileFormDataName: 'item[image]')
return

[退会済みユーザー]

少し修正しました。エラーは吐かなくなりましたが、やはり $scope.upload = (files) -> が呼ばれない状態が直りません（ngf-src="item.files[0]"には適切に値が返され、画像は表示されるのですがDBには格納されない状態です）。おかしな点があればどうか指摘していただきたいです。よろしくお願いいたします。

[edit.html.slim]
section ng-repeat="item in shop.items"
p select file:
input type="submit" value="ファイルを選択" ngf-select="" ng-model="item.files"
img ngf-src="item.files[0]" ngf-default-src="" ngf-accept="'image/*'"

[controller.coffee]
# $scope.item.files = []
$scope.$watch 'item.files', ->
$scope.upload $scope.files
return

$scope.upload = (files) ->
if files and files.length
alert "upload start"
file = item.files[0]
$scope.upload = Upload.upload(
url: '/api/shops/1/items'
method: 'POST'
# shop_idを動的に渡せていないので一時的にベタ書きしています
fields: 'item[shop_id]':'1'
file: file
fileFormDataName: 'item[image]')
return

[chiku_]

onchangeでもファイルの変更は検知できると思いますので、そちらでやってみたらいかがですか？
http://stackoverflow.com/questions/23983580/pass-angularjs-index-into-onchange

[退会済みユーザー]

コメントありがとうございます。onchangeも検討しましたが将来的にはドラッグ＆ドロップでのアップロードに対応させたいと考えているのでできればmodelでファイルの変更を監視したいです。

[chiku_]

> 似たような事例がstacoverflowで回答されています。こちらで解決できないでしょうか？
初期の回答を試してみましたが、ng-repeat内でもモデルの変更は取れました。
すみませんが、$scope.$watch 'item.files', ->ではいかないようなので、stacoverflowに書かれているようなコードで試してみてはいかがでしょうか？

[退会済みユーザー]

コメントありがとうございます。どこかで間違ったことをしているはずなのでもう少し試行錯誤してみます。。ありがとうございます！