title: How to access controller variables from AngularJS component?
body: <p>I am new to Angular JS and I was messing around with the components for the most part I understand them, but I cannot get my component to access any variables from the controller, I know the scope of components is always isolated but I swear I was able to access variables from a controller via the component before. Here's the code </p>
  
  <pre><code>&lt;div ng-app="ticket"  ng-controller="list"&gt;
          &lt;list tickets="list.tickets"&gt; &lt;/list&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <hr>
  
  <pre><code>   var app = angular.module('ticket', []);
     app.controller('list',function($scope){
         this.tickets = [];        // populate on component function. 
      })
       .component('list', {  
         bindings: {
          tickets: '=',
          client_id:'&lt;'
          },
         controller: function () {
           function pullTickets(){
              console.log(this.$tickets);
            }
            this.pullTickets = pullTickets;
  
        },
        template:[
          '&lt;div class="main_list_container" ng-init="$ctrl.pullTickets()"&gt;',
          '&lt;/div&gt;'
          ].join('')
      });
  
  
  document.addEventListener('DOMContentLoaded', function () {
    angular.bootstrap(document, ['ticket']);
  });
  </code></pre>
  
  <hr>
  
  <p>The pulltickets function is called when the components template is initialized but the function keeps saying that the this.tickets array from the controller is undefined, even when I included that var in the html via ticket="list.tickets". What am I doing wrong?  </p>