title: AngularJS: data change in controller is not reflected to view if Controller has eventListener
body: <p>I am having issues with displaying the correct behavior in UI after adding <code>eventListener</code> into the controller. The code looks like below:</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>class Controller {
      constructor($http, globals) {
          this.$http = $http;
          this.globals = globals;
          this.steps = ['task1','task2', 'task3'];
          this.stepCounter = 0;
          this.selectedObj;
          this.selectedObjModified = '';
          this.selectedObjDataModified = {};
          this.eventId = '';
          this.selectEnabled = true;
      }
  
      task1(event) {
          var iframe = document.getElementById('image-search');
  
          if (typeof iframe !== 'undefined' &amp;&amp; iframe !== null) {
              this.eventId = event.target.id;
              iframe.contentWindow.postMessage('someMessage', "*")
          }
          else {
              console.error('iframe elementr not found');
          }
          //this eventListener should be active only if message is received from anglerfish
  
          if(this.eventId == 'select-button') {
              console.log("inside eventHandler", this.eventId);
              window.addEventListener('message', function(e) {
                  var data = e.data;
                  if (typeof data !== 'undefined' &amp;&amp; data !== null) {
                      this.selectedObj = data;
                      this.selectedObj.url = data.url;
                      this.stepCounter++;
                  } else {
                      this.selectEnabled = true;
                      console.error('image not selected or anglerfish did not return the valid data ', data);
                  }
                  }.bind(this), false);
                  this.selectEnabled = false;
              }
          }
  
          step() {
              return this.steps[this.stepCounter];
          }
  
          gotoPreviousStep() {
              this.stepCounter &amp;&amp; this.stepCounter--;
              return this.step()
          }
  
          gotoNextStep() {
              this.stepCounter++;
              return this.step()
          }
  
          getSelectedObj() {
              return this.selectedObj;
          }
  
          task3() {
          //do something
      }
  }
  
  export default Controller;
  </code></pre>
  
  <p>Part of the body of <strong>mypage.html</strong>:</p>
  
  <pre><code>&lt;div ng-show="ctrl.step() == 'task2'"&gt;
      &lt;img ng-src="{{ctrl.selectedObj.url}}" /&gt;
  &lt;/div&gt;
  
  &lt;div ng-show="ctrl.step() == 'task3'"&gt;
      //do something
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>footer:</strong></p>
  
  <pre><code>&lt;div class="modal-footer"&gt;
          &lt;div class="col-md-12 text-center" ng-switch="vm.step()"&gt;
              &lt;button type="button" class="btn btn-danger text-uppercase" ng-click="$dismiss(true)"&gt;{{ 'CLOSE' | translate }}&lt;/button&gt;
              &lt;button type="button" id = "select-button" class="btn btn-primary text-uppercase" data = "select-button" ng-click="ctrl.task1($event)" ng-disabled="!ctrl.selectEnabled"
                      ng-switch-when="task1"&gt;{{ 'SELECT' | translate }}&lt;/button&gt;
              &lt;button type="button" class="btn btn-danger text-uppercase" ng-click="ctrl.gotoPreviousStep()" ng-hide="ctrl.step() == 'task1'"&gt;{{ 'BACK' | translate }}&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary text-uppercase" ng-click="ctrl.gotoNextStep()" ng-disabled="!vm.getSelectedObj()"
                      ng-switch-default&gt;{{ 'NEXT' | translate }}&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary text-uppercase btn-success"ng-click="vm.task3()"
                      ng-switch-when="task3"&gt;{{ 'SAVE' | translate }}&lt;/button&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code works as expected if I add one more task into the array element and between <code>task1</code> and <code>task2</code> and put one more <code>div</code> in view. Here, in <code>task1</code>, I select an object from the <code>iframe</code> window and get the object details. This logic is inside the <code>task1</code> function in <code>Controller</code> where I have an <code>eventListener</code>. So what is happening is when I click select, it's executing <code>task1</code> where <code>eventListener</code> gets triggered, when this function is working, the control goes back to view. At some point, <code>eventListener</code> will be done with its job, in which case, the step would be <code>task2</code> for which I have a <code>div</code> enabled in view which is not happening.  It just gets stuck on <code>task1</code>, i.e., object selection in <code>iframe</code> with the <code>NEXT</code> button disabled.
  But, if I add one more task in between <code>task1</code> and <code>task2</code>, control returns back to that new task in view and then again click next, then it will show up the <code>task2</code> <code>div</code>. I am not allowed to post the exact code but did my best to copy and edit the important parts.</p>