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

directives.factory('BaseModel', function() {
    return function() {
        return {
            fruits: ['apples', 'bananas', 'tomatoes']
        };
    }
});

function UserSignupPage($scope, BaseModel) {
    $scope.model = new BaseModel();
}

function AnotherPage($scope, BaseModel) {
    $scope.model = new BaseModel();
}

UserSignupPage.$inject = ['$scope', 'BaseModel'];
AnotherPage.$inject = ['$scope', 'BaseModel'];

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