Repeat Directive

HTML

<div ng-app="app" ng-controller="Controller as ctrl">
  <my-repeat-directive messages="ctrl.messages" show="ctrl.show">
  </my-repeat-directive>
</div>

JavaScript

angular
  .module('app', [])
  .controller('Controller', Controller)
  .directive('myRepeatDirective', myRepeatDirective);


function Controller() {
  var vm = this;
  vm.messages = ["Message 1", "Message 2", "Longer message 3"];
  vm.show = true;
}

function myRepeatDirective() {
  return {
    restrict: 'E',
    scope: {
      messages: '=',
      show: '=',
    },
    template: '<div ng-repeat="message in messages">' +
      '<p>Message {{message}}</p> </div>' +
      '<p ng-show=show> This is a footer </p>'
  }
}