title: $rootScope:inprog Action already In Progress
body: <p>I started to work with <code>Angular Material</code> and have a hard time understanding an issue with the <code>$scope</code>.<code>apply</code> functionality... whenever I try to notify the UI about changes by calling <code>apply</code> it fails with an error. I know there are similiar questions on SO, but in my case data is not stored by the <code>scope</code> but by the controller instance...</p>
  
  <p>I also use <code>TypeScript</code> for my controller implementation; not sure, but this seems to be quite uncommon, since most sample code I found is based on an inline controller implementation right in the view.</p>
  
  <p>My controller looks like that...</p>
  
  <pre><code>module MyApp {
  
      export class MyController {
  
          private scope: angular.IScope;
          private http: angular.IHttpService;
  
          public model: { data: SampleData } = { data: { } };
  
          constructor($scope: angular.IScope, $http: angular.IHttpService) {
              this.scope = $scope;
              this.http = $http;
          }
  
          public querySampleData(): void {
  
              const serviceEndpoint: string = "http://localhost:8080/api/";
              var promise: ng.IHttpPromise&lt;SampleData&gt; = this.http.get(serviceEndpoint + "sample", { });
  
              var callback: ng.IHttpPromiseCallback&lt;SampleData&gt; = (
                  data: SampleData,
                  status: number,
                  headers: angular.IHttpHeaderGetter,
                  config: angular.IRequestConfig) =&gt; {
                  this.scope.apply(() =&gt; {
                      this.model.data = data;
                  };
              };
  
              promise.success(callback);
          }
      }
  
      export interface SampleData {
          message? string;
      }
  }
  </code></pre>
  
  <p>The controller provides the <code>querySampleData</code> method which obtains some data from a remote service (it uses <code>IHttpService</code> for asynchronous API calls). The controller is utilized by the view in the following way...</p>
  
  <pre><code>&lt;html ng-app="app"&gt;
      &lt;body ng-controller="MyController as c"&gt;
          &lt;div&gt;
              &lt;button ng-click="c.querySampleData()" 
                      aria-label="Query sample data"&gt;Query sample data&lt;/button&gt;
              &lt;p&gt;{{c.model.data.message}}&lt;/p&gt;
          &lt;/div&gt;
          ...
          &lt;script src="../scripts/app.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              var app = angular.module("app", ["ngMaterial"]);
              app.controller("MyController", [ "$scope", "$http", MyApp.MyController ]);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>The initialization of the controller works fine; all dependencies get properly injected into the controller and also the binding to the <code>querySampleData</code> method works as expected (when I click the button the method is called). If I assign the received data to the model the UI is not updated, so I added a call to the <code>$apply</code> method in order to inform the UI about changes... which gives me the error I mentioned above.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>The documentation at: <a href="https://docs.angularjs.org/error/$rootScope/inprog" rel="nofollow">https://docs.angularjs.org/error/$rootScope/inprog</a> recommends to use <code>$timeout</code> instead of <code>$apply</code> to ensure asynchronous execution; of course this fixes the error, but the UI does not change...</p>