title: $rootScope:inprog $apply already in progress .change event error
body: <p>In my project, I'm trying to upload an image, read it as a dataURL and store it into my database.</p>
  
  <p>my HTML ng-click's call these methods with either true or false as a parameter (one does body image and the other a profile image)</p>
  
  <p>Depending on whether true or false is called, it changes the id's for the event.</p>
  
  <p>For some reason, when its "true" everything works perfectly fine.  The user can pick the image, it gets sent to the database properly, and the image is loaded properly. </p>
  
  <p>However, when "false" is called, I get the error: </p>
  
  <blockquote>
    <p><strong>[$rootScope:inprog] $apply already in progress</strong></p>
  </blockquote>
  
  <p>and then the console.log() test <strong>"2222"</strong> does not get called.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;img src="{{controller.myCause.causeImage}}" ng-click="controller.uploadImage('true')" alt="Your Image Here" class="cause-img" id="profileImage" style="width: 80%; height: 35%;" height="300" /&gt;
  &lt;input id="imageUpload" type='file'&gt;
  
  &lt;img src="{{controller.myCause.causeThumbnailImage}}" ng-click="controller.uploadImage('false')" alt="Your Thumbnail Here" id="profileImageThumb" class="cause-img" style="width: 80%; height: 20%;" height="200" /&gt;
  &lt;input id="profileImageUpload" type='file'&gt;
  </code></pre>
  
  <p>Client Side</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/////////////////////////////////////
  //Begin Uploading Cause Profile Image
  public uploadImage(bool) {
      if (bool === "true") {
          $("#imageUpload").click();
          this.imgUpload(bool);
      } else {
          $("#profileImageThumb").click();
          this.imgUpload(bool);
      }
  }
  
  public imgUpload(bool) {
      console.log(bool);
      var _this = this;
      var id = "";
      var imgId = "";
  
      if (bool === "true") {
          id = "#imageUpload";
          imgId = "#profileImage";
      } else {
          id = "#profileImageUpload";
          imgId = "#profileImageThumb";
      }
  
      console.log("111");
  
      $(id).change(function () {
          console.log("2222");
          if (this.files &amp;&amp; this.files[0]) {
              var reader = new FileReader();
              reader.readAsDataURL(this.files[0]);
              $(imgId).attr('src', this.files[0]);
              _this.convertFileToBase64AndSet(this.files, bool);
          }  
      });
  
  };
  
  convertFileToBase64AndSet(fileList: FileList, bool) {
      var self = this;
      if (fileList.length &gt; 0) {
          var reader = new FileReader();
  
          reader.onloadend = (e: Event) =&gt; {
              self.postProfileImage(reader.result, bool);
          }
          reader.readAsDataURL(fileList[0]);
      }
  }
  
  public postProfileImage(file, bool) {
  
      if (bool === "true") {
          this.$http.put(`api/causes/profpic`, JSON.stringify(file)).then((res) =&gt; {
              this.$state.reload();
          });
      } else {
          this.$http.put(`api/causes/thumbpic`, JSON.stringify(file)).then((res) =&gt; {
              this.$state.reload();
          });
      }
  }
  //End Cause Profile Image Upload
  ////////////////////////////////</code></pre>
  </div>
  </div>
  </p>