title: AngularJS component modal not updating after a Promise
body: <p>I created a sample angular js app with components and tried to load data from an API which is a Promise.</p>
  
  <p>The problem here is when the promise is resolved the response data is not updating in UI, Modal is updating if I do a <code>$scope.$apply()</code>. I tried $onChanges but that too didn't help!</p>
  
  <p>This is not the correct implementation, right? Please provide notes about my code structure and this issue.</p>
  
  <p>Am I missing ant thing here?
  <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>angular.module('detailapp', ['ui.router'])
      .component('app', {
          template: `
          &lt;div class="container"&gt;
               &lt;div ui-view&gt;&lt;/div&gt;
          &lt;/div&gt;
      `
      })
      .config(function ($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/');
          //Home or Default page
          $stateProvider.state('home', {
              url: '/',
              template: '&lt;div&gt;Home&lt;/div&gt;'
          });
          //details, with id
          $stateProvider.state('detail', {
              url: '/:id',
              template: '&lt;detail-component&gt;&lt;/detail-component&gt;'
          });
  
      })
      .service('endPointService', ['$q', '$http', function ($q, $http) {
          return {
              getDetailUrl: function (id) {
                  return 'https://api.github.com/users/' + id;
              },
              get: function (url, params) {
                  return new Promise(function (resolve, reject) {
                      $http.get(
                          url, {
                              params: params
                          }
                      ).then(function (res) {
                          resolve(res);
                      }).catch(function (err) {
                          reject(err);
                      });
                  });
              }
          }
      }])
      .factory('listService', ['endPointService', function listService(endPointService) {
          let serviceInstance = {};
          serviceInstance.getDetail = function (Id) {
              return endPointService.get(
                  endPointService.getDetailUrl(Id)
              ).then((res) =&gt; {
                  return res.data;
              });
          };
          return serviceInstance;
      }])
      .component('detailComponent', {
          template: `
      &lt;div class="panel panel-default "&gt;
        &lt;div class="panel-heading"&gt;Detail Component: ID - {{vm.id}}&lt;/div&gt;
          &lt;div class="row"&gt;
                  &lt;div class="col-md-3 col-xs-3"&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/div&gt;
                  &lt;div class="col-md-9 col-xs-9"&gt;&lt;span class="text-info pull-left"&gt;{{vm.obj.name}}&lt;/span&gt;                &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
                  &lt;div class="col-md-3 col-xs-3"&gt;&lt;strong&gt;Follow&lt;/strong&gt;&lt;/div&gt;
                  &lt;div class="col-md-9 col-xs-9"&gt;&lt;span class="text-info pull-left"&gt;{{vm.obj.followers_url}}&lt;/span&gt;                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;`,
          controller: ['$scope', '$stateParams', 'listService', function detailController($scope, $stateParams, listService) {
              let vm = this;
              vm.id = $stateParams.id;
              vm.obj = {};
              vm.$onInit = function () {
                  /*controller on init */
                  vm.getDetails();
                  console.log(`onInit ${JSON.stringify(vm.obj)}`);
              };
              // vm.$onChanges = function (changes) {
              //     console.log(`onChanges ${JSON.stringify(vm.obj)} ${JSON.stringify(vm.changes)}`);
              //     // if (changes &amp;&amp; angular.isUndefined(changes.obj.previousValue) &amp;&amp; angular.isDefined(changes.obj.currentValue)) {
              //     //     console.log('Changing the modal' + changes);
              //     //     vm.obj = changes.obj.currentValue;
              //     // }
              // };
              vm.getDetails = function () {
                  listService.getDetail(vm.id).then(res =&gt; {
                      vm.obj = res;
                      $scope.$apply();
                      console.log(`api call ${JSON.stringify(vm.obj)}`);
                  });
  
              };
          }],
          controllerAs: 'vm'
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"&gt;&lt;/script&gt;
  
  &lt;body ng-app="detailapp"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;app&gt;app is loading here...!&lt;/app&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>