Edit in JSFiddle

var directives = angular.module('myModule', []);
directives.directive('list', function() {
  return {
    restrict: 'A',
    scope: {
      listItems: '='
    },
    replace: true,
    template: '<ul><li ng-repeat="item in listItems">*{{item}}*</li></ul>'
  };
});
 
function UserSignupPage($scope) {
    $scope.fruits = ['apples', 'bananas', 'tomatoes'];
}
 
UserSignupPage.$inject = ['$scope'];

<h1>Testing</h1>
<div ng-controller="UserSignupPage">
    <p>Fruits!</p>
    <div data-list data-list-items="fruits"></div>
</div>