title: AngularJS Controller As: Promise not updating view
body: <p>Been banging my head against a wall trying to figure out how <code>controller as</code> and Promises work together with AngularJS. It seems that by wrapping a result in a promise, AngularJS does not see the controller updating until you trigger a different change.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="MainModule" ng-controller="MainController as main"&gt;
      &lt;div class="bar bar-header bar-calm"&gt;
          &lt;h1 class="title"&gt;Test Bench&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="app"&gt;
          &lt;h1&gt;Test Bench&lt;/h1&gt;
  
          &lt;div class="text-center"&gt;
              &lt;p&gt;Last Fingerprint Result: {{main.lastAuthSuccessful}}&lt;/p&gt;
          &lt;/div&gt;
  .....
  &lt;/body&gt;
  </code></pre>
  
  <p>The controller method in question:</p>
  
  <pre><code>doFingerprint() {
      this.auth
        .fingerprint()
  
        .then(success =&gt; {
          console.log(this, self, this.self);
          this.lastAuthSuccessful = success;
        })
  
        .catch(error =&gt; {
          console.error(error);
          return false;
        });
    }
  </code></pre>
  
  <p>And the fingerprint method in the auth service:</p>
  
  <pre><code>fingerprint(): Promise&lt;boolean&gt; {
      if (!this.finger) return Promise.reject("Fingerprint API not yet loaded.");
  
      return new Promise((resolve, reject) =&gt; {
        this.finger.show(
          {
            clientId: "Fingerprint-Demo",
            clientSecret: "password"
          },
  
          () =&gt; {
            resolve(true);
          },
  
          err =&gt; {
            resolve(false);
          }
        );
      });
    }
  </code></pre>
  
  <p>This feels pretty straightforward, but the updated <code>lastAuthSuccessful</code> from the promise refuses to update the view until you attempt to call the method again.</p>