Why is this angularjs component binding not work but the same style directive is working

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

I am calling the component using the following html:

<price-level-header-component price-level="price_level"></price-level-header-component>

price-level-header.component.js:

(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'
    });
})();

price-level-header.component.html:

<table class="table table-borderless">
<tbody>
    <tr>
        <th class="col-sm-2">Short Code</th>
        <th class="col-sm-4">Description</th>
        <th class="col-sm-2 jrcenter" title="When Checked, prices will not be generated in advance">Realtime Rules</th>
        <th class="col-sm-4"></th>
    </tr>
    <tr>
        <td><input class="form-control" name="short_code" type="text" ng-model="priceLevel.short_code"></td>
        <td><input class="form-control" name="description" type="text" ng-model="priceLevel.description"></td>
        <td class="jrcenter-cell"><input type="checkbox" ng-model="priceLevel.realtime_rules"></td>
        <td>
            <a ng-click="saveLevel()" class="btn btn-primary">Save and Update Pricing</a>
            <a ng-click="deleteLevel()" class="btn btn-danger">Delete Level</a>
        </td>
    </tr>
</tbody>

Source: AngularJS