AngularJSで<input type="file">のonchangeイベントをハンドリングする

<input type="file">にファイルが設定されたタイミングでスコープ内で定義した関数を実行したい時、普通にng-changeを要素につけても動かない。

<input type="file" ng-change="parseFile()">

これでは動かない。

ちょっと無理やりだけど、こうすれば動く。

<input type="file" onchange="angular.element(this).scope().parseFile(this)">

angular.module('App', [])
  .controller('MyCtrl', function($scope) {
    $scope.parseFile = function(fileElement) {
      var file = fileElement.files[0];
      console.log(file);

      $scope.fileType = file.type;
      $scope.fileName = file.name;

      $scope.$apply();
    };
  });

あとはfile.typeやfile.nameを調べるなりFileReaderを使って中身を読むなりご自由に。
なお、このコールバック関数内でモデルオブジェクトを変更した場合は、$scope.$apply()を呼ばないと変更が反映されません。

参考: http://stackoverflow.com/questions/17922557/angularjs-how-to-check-for-changes-in-file-input-fields