Reuse components in AngularJS

You should use module to use it as reusing component. https://docs.angularjs.org/guide/module

i'm utilizing angular module and factory like this:

app.js

'use strict';
/* App Module */

var app = angular.module('my-app', [

    'my-models',

]);

my-models.js

var myModels = angular.module('my-models', []);


myModels.factory('DocumentsModel', function ($http)
{
    var DocumentsModel = function ()
    {
    };

    DocumentsModel.get_documents = function (page, results_per_page)
    {

        var data = {
            page: page,
            results_per_page: results_per_page
        };

        var json = angular.toJson(data);

        return $http.post('/api/documents', json);
    };

    DocumentsModel.set_document_state = function (document_id, document_state_id)
        {
            var json = angular.toJson(
                {
                    'document_state': document_state_id
                }
            );

            return $http.post('api/document/'+document_id', json);
        };

    return DocumentsModel;
});

using angular dependency injection mechanism, you can re-use this logic in multiple controllers by adding DocumentsModel to the controller function as parameter:

documents-ctrl.js

var app = angular.module('my-app');

var controller = app.controller("DocumentsCtrl",
    function ($scope, DocumentsModel)
    {

        DocumentsModel.get_documents()
            .success(function(data){
                $scope.documents = data.documents;
            });

    });

in addition, you cad define one for your 'project' entity.

Edit:

Javier commented:

assuming your documents response is

[{name: ... , size: ... , last_modified: ... }, {name: ... , size: ... , last_modified: ... }, ...]

you can utilize ng-repeat like this:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Last Modified</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="document in documents">
            <td>{{ document.name }}</td>
            <td>{{ document.size/1024 | number:4 }} MB</td>
            <td>{{ document.last_modified | date:'yyyy-MM-dd HH:mm:ss' }}</td>
        </tr>
    </tbody>

</table>

Just add it as a dependency to your own module. Like

angular.module('test', []);

angular.module('test2', ['test']);

You might want to take a look at Yeoman