title: AngularJS Error: Non-assignable model expression
body: <p>Saw this question asked a few times but I could not see how the answers applied to my problem. I keep receiving this error upon trying to upload a file. </p>
  
  <p><code>Error: Non-assignable model expression: undefined (directive: fileReader)</code></p>
  
  <p>How could I resolve it?</p>
  
  <p>I've included all of the files that interact with each other, even though I am fairly certain the error occurs in fileDirective.js</p>
  
  <p><strong>fileDirective.js. contains this directive:</strong></p>
  
  <pre><code>spreadsheetApp.directive('fileReader', function() {
      return {
          scope: {
              file: '='
          },
          restrict: 'E',
          template: "&lt;input type='file' onchange='angular.element(this).scope().upload(this)'&gt;",
          link: function (scope, element, attrs) {
              scope.upload = function (element) {
                  scope.$apply(function (scope) {
                      scope.file = element.files[0];
                  });
              };
  
              scope.$watch('file', function () {
                  if (scope.file) {
                      var reader = new FileReader();
                      reader.onload = (function (file) {
                          return function (env) {
                              scope.$apply(function () {
                                  scope.file.contents = env.target.result;
                              });
                          }
                      }(scope.file));
                      reader.readAsText(scope.file);
                  }
              }, true);
          }
      };
  });
  </code></pre>
  
  <p>(This was actually borrowed from <a href="https://github.com/tombaaaaa/angularjs-textfilereader/blob/master/directives.js#L21" rel="noreferrer">here</a>.)</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;html ng-app="spreadsheetApp"&gt;
  ...
  &lt;ng-view&gt;&lt;/ng-view&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/directives/fileDirective.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/spreadsheetController.js"&gt;&lt;/script&gt;
  ...
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js:</strong>
      'use strict';</p>
  
  <pre><code>var spreadsheetApp = angular.module('spreadsheetApp',[]);
  
  spreadsheetApp.config(function($routeProvider) {
      $routeProvider.
          when('/', {
          controller: 'spreadsheetController',
          templateUrl: 'views/innerHTML.html'
          });
  });
  </code></pre>
  
  <p>And the contents of <strong>innerHTML.html</strong> are simply:
  <code>&lt;file-reader&gt; &lt;/file-reader&gt;</code></p>