title: Why is this angularjs component binding not work but the same style directive is working
body: <p>I have tried to create the simple component below without success. The two way binding for "priceLevel" which is an object comes up as undefined in the template and/or where I am console logging it out. However, if I comment out the component code and uncomment code to create a similar directive it works as expected. Could someone tell me what I'm doing wrong or explain why it does not work as a component. I am using angularjs 1.6.6</p>
  
  <p>I am calling the component using the following html:</p>
  
  <pre><code>&lt;price-level-header-component price-level="price_level"&gt;&lt;/price-level-header-component&gt;
  </code></pre>
  
  <p>price-level-header.component.js:</p>
  
  <pre><code>(function () {
      // var app = angular.module('priceLevelHeaderComponent',[]);
      // app.directive('priceLevelHeaderComponent', function(){
      //   return {
      //     restrict: 'E',
      //     templateUrl:'/packages/rmsg/perp-inventory-control/js/templates/price-level-header.component.html',
      //     scope:{
      //       priceLevel: "=",
      //     },
      //     controller: function($scope) {
      //         console.log($scope.priceLevel,'$scope.priceLevel');
      //     },
      //   };
      // });
  
      var app = angular.module('priceLevelHeaderComponent',[]);
  
      app.component('priceLevelHeaderComponent', {
          bindings: {
             priceLevel: '='
          },
          controller: function () {
              console.log(this.priceLevel,'this.priceLevel');
          },
          templateUrl: '/packages/rmsg/perp-inventory-control/js/templates/price-level-header.component.html'
      });
  })();
  </code></pre>
  
  <p>price-level-header.component.html:</p>
  
  <pre><code>&lt;table class="table table-borderless"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;th class="col-sm-2"&gt;Short Code&lt;/th&gt;
          &lt;th class="col-sm-4"&gt;Description&lt;/th&gt;
          &lt;th class="col-sm-2 jrcenter" title="When Checked, prices will not be generated in advance"&gt;Realtime Rules&lt;/th&gt;
          &lt;th class="col-sm-4"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input class="form-control" name="short_code" type="text" ng-model="priceLevel.short_code"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="form-control" name="description" type="text" ng-model="priceLevel.description"&gt;&lt;/td&gt;
          &lt;td class="jrcenter-cell"&gt;&lt;input type="checkbox" ng-model="priceLevel.realtime_rules"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a ng-click="saveLevel()" class="btn btn-primary"&gt;Save and Update Pricing&lt;/a&gt;
              &lt;a ng-click="deleteLevel()" class="btn btn-danger"&gt;Delete Level&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>