title: pass parameter to angular component after ajax request
body: <p>I am dealing with angular 1 component, I made a datatable component which accepts a dataset as a parameter.</p>
  
  <p>here is how I am using <code>datatable</code> component.</p>
  
  <p><code>index.html</code></p>
  
  <pre><code>...
  &lt;datatable dataset="ViewModel.dataset"&gt;&lt;/datatable&gt;
  ...
  </code></pre>
  
  <p><code>index.controller.js</code></p>
  
  <pre><code>(function() {
  
    'use strict';
  
    angular
      .module('DashboardApplication')
      .controller('PagesIndexController', PagesIndexController);
  
    function PagesIndexController() {
  
      var self = this;
  
      self.dataset = {};
  
      Restangular.one('someurl').get().then(function( pages ) {
        self.dataset = pages;
      });
    }
  })();
  </code></pre>
  
  <p><code>datatable.component.js</code></p>
  
  <pre><code>(function() {
  
    'use strict';
  
    angular
      .module('DashboardApplication')
      .component('datatable', {
        bindings: {
          dataset: '&lt;'
        },
        templateUrl: '/frontend/templates/dashboard/components/data-table.html',
        controller: 'DataTableController'
      });
  
  })();
  </code></pre>
  
  <p><code>datatable.controller.js</code></p>
  
  <pre><code>(function() {
  
    'use strict';
  
    angular
      .module('DashboardApplication')
      .controller('DataTableController', DataTableController);
  
    function DataTableController() {
      var self = this;
      console.log(self.dataset); // which is undefined!
    }
  
  })();
  </code></pre>
  
  <p>The problem is I'm getting <code>undefined</code> for <code>dataset</code> in <code>datatable.controller.js</code>. Is there any solution for this?!</p>