Need an advise in angularjs SPA

Question

I'm writing SPA, SPA which has almost the same structure(DOM) all the time(except authorization form). Visual it looks totally the same, but there are little different between them. Models are different in different situation and behaviour of application depends on what model using at this time. For example one model looks like:

<table class="matrix" ng-if="search_result_type=='find_company'">
    <tr ng-class="{matrix_row: !row.show}" ng-style="multiStyle(row, this)" class="animation" ng-repeat="row in search_result | filter:cacheTemplate track by $index">
        <td class="properties">{{row.name}}</td>
        <td class="properties" ng-if="isArray(row.contact)" ng-click="row.close!='disable' && row.show!=true ? row.show=true : null" colspan="{{row.show ? 2 : 1}}">
            <div ng-show="!row.show" ng-class="{multi_close : isMulti(row)}">{{row.contact[0].name}}</div>
            <div ng-repeat="ctx in row.contact track by $index" class="matrix_row multi_cell" style="line-height: 3; width: 100%; position: relative;" ng-show="row.show" ng-click="row.close!='disable' ? alert('загрузка контакта '+ ctx.name) : null">
                <div style="display: inline-block; width: 49%;">{{ctx.name}}</div>
                <div style="display: inline-block; width: 49%;">{{ctx.phone}}</div>
                <div class="block" ng-if="$index==row.contact.length-1" ng-mouseover="row.close='disable'" ng-mouseleave="row.close='enable'" ng-click="row.close!='enable'? row.show=false : null"></div>
            </div>

        </td>
        <td class="properties" ng-if="!isArray(row.contact)">{{row.contact}}</td>
        <td class="properties"  ng-show="!row.show">{{row.company_phone}}</td>
        <td class="properties">{{row.Legal_address}}</td>
    </tr>
</table>

Second model:

 <table class="matrix" ng-if="search_result_type=='find_calculation'">
    <tr ng-class="{matrix_row: !row.show}" class="animation" ng-click="loadCalculation(row.id)" ng-style="multiStyle(row, this)" ng-repeat="row in search_result | filter:cacheTemplate track by $index">
        <td class="properties">{{row.name}}</td>
        <td class="properties">{{row.a_limit | currency:'RUB '}}</td>
        <td class="properties">{{row.total_price | currency:'RUB '}}</td>
        <td class="properties">{{row.amount}}</td>
        <td class="properties">{{row.date}}</td>
    </tr>
</table>

And the last one:

 <table class="matrix"  ng-if="search_result_type=='load_calculation'" ng-repeat="park in parks track by $index" ng-init="parentIndex = $index">
        <tbody>
            <tr ng-repeat="process in processes | filter : { park: parentIndex } track by $index">
                <td class="properties">{{process[1]}}</td>
                <td class="properties">{{process[2]}}</td>
                <td class="properties">{{process[3]}}</td>
                <td class="properties">{{process[4]}}</td>
                <td class="properties">{{process[5]}}</td>
                <td class="properties">{{process[6]}}</td>
            </tr>
        </tbody>
    </table>

I am searching not for answer, but for advise. How many controllers I need to use? One for each model? And if I make this html structure totally the same it will be better?

Answer 1

I would only use 1 controller, with html which has some stuff in it like

than you could also write a factory for this controller which handles dependent stuff. I see no need for multiple controller, but i guess it is very dependend on your code if you will use one or multiple controller.