title: Angularjs 1.5 - Component Communication using service - Async variable manipulation?
body: <p>I am very new to this Angular component communication. I am using Angular 1.5.X version and I am using factory to share data between components. I am facing one issue where Async value of Service Variable refreshes after certain time. </p>
  
  <p>I understand one solution is to set watcher on non scope variable but I think I am missing something important here. Can you guys please share views? </p>
  
  <p>This is Service.js code</p>
  
  <pre><code>Service.$inject = ['$http','$q'];
  
  function Service($http,$q) {
  
    this.$http = $http;
    this.$q = $q;
  
  };
  
  Service.prototype.getTileCount = 0;
  
  Service.prototype.getTileData = function(Url){
  
      var deferred = this.$q.defer();
  
      this.$http.get(Url)
          .success(function(response){
              Service.prototype.getTileCount = response.data.length;
              console.log('data length :', Service.prototype.getTileCount);
          deferred.resolve(response);
      });
  
      return deferred.promise;
  };
  </code></pre>
  
  <p>This is component 1 controller code</p>
  
  <pre><code>function Component1Controller(Service) {
  
      this.tileData ={};
      var self = this;
  
      var promise = Service.getTileData(this.sourceUrl);
  
        promise.then(function(data) {
  
          self.tileData = data;
          Service.getTileCount = data.length;
          console.log('This is tileData : '+ Service.getTileCount);
        });
  
      };
  </code></pre>
  
  <p>This is component 2 controller code</p>
  
  <pre><code>function Component2Controller(Service) {
  
    var self = this;
  
    console.log(Service.getTileCount);
  // getting getTileCount = 0; After setting timeout function of 5 second I am able to get getTileCount value
  
  };
  </code></pre>