My AngularJS 1.5 component called booking-info isn't populating the input fields in my form with booking data

Question

I have a form inside a bookingEdit component and a bookingInfo component containing the form's input fields. The fields inside bookingInfo component aren't being populated with the booking data. How can I get these fields to be populated using my booking-info and booking-edit components?

booking-edit.template.html

<form name="$ctrl.form" ng-submit="$ctrl.updateBooking()">
        <fieldset>
            <legend>Edit Booking</legend>
            <booking-info booking="$ctrl.booking"></booking-info>
            <button class="btn btn-success" type="submit">Save</button>
        </fieldset>
    </form>

booking-edit.component.js

'use strict';

angular.
    module('bookingEdit').
    component('bookingEdit', {
        templateUrl: 'booking-edit.template.html',
        controller: ['BookingService','$location',
            function (BookingService,$location) {
                let self = this;

                self.$routerOnActivate = function(next, previous) {
                     self.booking = BookingService.get({ id: next.params.id });
                };

                self.updateBooking = function () {
                    BookingService.update({ id: self.booking.bookingId }, self.booking)
                        .$promise
                        .then(
                            function () {
                                $location.path('/list');
                            },
                            function (error) {

                            }
                        );
                };
            }
        ]
    });

booking-info.component.js

angular.module('app').
    component('bookingInfo', {
       templateUrl: 'booking-details.html',

       bindings: { 
          booking:'<'
         },
       controller: function(){
         let self = this;


       }
    });

booking-details.html

<div class="form-group">
    <label for="contactName">Contact Name</label>
    <input required type="text" class="form-control" ng-model="booking.contactName">
</div>
<div class="form-group">
    <label for="contactNumber">Contact Number</label>
    <input required type="tel" class="form-control" ng-model="booking.contactNumber">
</div>

Answer 1

You seem to forgot the $ctrl in booking-details.html

<div class="form-group">
  <label for="contactName">Contact Name</label>
  <input required type="text" class="form-control" ng-model="$ctrl.booking.contactName">
</div>
<div class="form-group">
  <label for="contactNumber">Contact Number</label>
  <input required type="tel" class="form-control" ng-model="$ctrl.booking.contactNumber">
</div>