title: Get binded object inside component controller
body: <p>Angular 1.6</p>
  
  <p>I can't understand why I don't have access to the binded <code>self.widget</code> object in my component controller. The <code>console.log(self.widget);</code> prints <code>undefined</code>. But I get access to the <code>widget</code> object in template via <code>$ctrl.widget</code>, the widget works.</p>
  
  <p><a href="https://i.stack.imgur.com/wBqpn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBqpn.png" alt="enter image description here"></a></p>
  
  <p>And I see the object in browser console when I do <code>angular.element($0).scope().$ctrl</code></p>
  
  <p>Component: </p>
  
  <pre><code>import template from './templates/clock-widget.template.html';
  import controller from './clock-widget.controller';
  
  const clockWidget = {
      bindings: {
          widget: '&lt;'
      },
      controller,
      template
  };
  
  export default clockWidget;
  </code></pre>
  
  <p>Controller of the component:</p>
  
  <pre><code>import controller from './clock-widget.settings.controller.js';
  import template from './templates/clock-widget.settings.template.html';
  
  import 'angular-clock/dist/angular-clock.css';
  import './style.css';
  
  import timezones from './timezones';
  
  const injectParams = ['$scope', '$timeout', '$uibModal'];
  const ClockWidgetCtrl = function($scope, $timeout, $uibModal) {
      const self = this;
  
      self.gmtOffset = 2;
      console.log(self.widget);
  
      self.openSettings = function() {
          $uibModal.open({
              scope: $scope,
              controllerAs: '$ctrl',
              controller,
              template,
              resolve: {
                  widget: function() {
                      return self.widget;
                  }
              }
          });
      };
  };
  
  ClockWidgetCtrl.$inject = injectParams;
  export default ClockWidgetCtrl;
  </code></pre>
  
  <p>Component template:</p>
  
  <pre><code>&lt;div class="box clock-widget"&gt;
      &lt;div class="box-header"&gt;
          &lt;h3&gt;{{ $ctrl.widget.title }}&lt;/h3&gt;
          &lt;div class="box-header-btns pull-right"&gt;
              &lt;a title="settings" ng-click="$ctrl.openSettings(widget)"&gt;&lt;i class="glyphicon glyphicon-cog"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a title="Remove widget" ng-click="$ctrl.remove(widget)"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- END box-header --&gt;
  
      &lt;div class="box-content"&gt;
          &lt;b&gt;{{$ctrl.widget.config.location.split('/')[1]}}&lt;/b&gt;
          &lt;ds-widget-clock gmt-offset="$ctrl.gmtOffset" show-analog show-gmt-info&gt;&lt;/ds-widget-clock&gt;
      &lt;/div&gt; &lt;!-- END box-content --&gt;
  &lt;/div&gt; &lt;!-- END box --&gt;
  </code></pre>