Current date is not showing after breaking out my code in the template

Question

I am showing current date.it works fine when I place this inside index.html. But when I break the code in components and templates it does not show the date in my view.

I have tried to show this with {{date | date:"EEE MMM dd yyyy"}}

and in my controller object scope i have this.date = new Date() this works only in index.html

Component

angular.
  module('cListApp').
  component('itemsList', {
    templateUrl:'items-list.template.html',
    controller: function cListController() {
      this.items = [
        {
            name: 'Nexus S',
            snippet: 'Fast just got faster with Nexus S.',
            icon: 'https://picsum.photos/100/100/?image=491',
            placeholderImage : 'https://picsum.photos/100/100/?blur',
        },
      ],
      this.date = new Date();
    }
  });

Template

<ul> 
    <li class="list-body-container" ng-repeat="item in $ctrl.items"> 
        <div class="profileImage"> 
            <img ng-src = "{{item.icon || item.placeholderImage}}"/>
        </div> 
        <div class="list-body-left"> 
            <div class="li-title"><h2>{{item.name}}</h2><h4>Title3</h4></div> 
            <div class="li-body"><p>{{item.snippet}}</p></div> 
            <div class="li-date"> 
                {{date | date:"EEE MMM dd yyyy"}}
            </div>
        </div>
    </li>
</ul>

Answer 1

I have updated my code. Controller

angular.
  module('cListApp').
  component('itemsList', {
    templateUrl:'items-list.template.html',
    controller:['$http', function cListController($http) {
        var self = this;
        self.date = new Date();
        $http.get('data/data.json').then(function(response) {
          self.items = response.data; 
        });
      }]
  });

Template

<ul> 
    <li class="list-body-container" ng-repeat="item in $ctrl.items"> 
        <div class="profileImage"> 
            <img ng-src = "{{item.icon || item.placeholderImage}}"/>
        </div> 
        <div class="list-body-left"> 
            <div class="li-title"><h2>{{item.name}}</h2><h4>Title3</h4></div> 
            <div class="li-body"><p>{{item.snippet}}</p></div> 
            <div class="li-date"> 
                {{$ctrl.date | date:"EEE MMM dd yyyy"}}
            </div>
        </div>
    </li>
</ul>