how do you re-use templates in angularjs

Question

How can you re-use a template? Consider the following javascript object:

{
    MyName: '',
    Address: {
        Street: ''
    },
    MyEmployer: {
        CompanyName: '',
        Address: {
            Street: ''
        }
    }
}

And a template file at /templates/myTemplate.html:

<div ng-app="someapp" ng-controller="somecontroller">
    MyName: <input type="text" ng-model="MyName" />

    <div ng-include="'/templates/address.html'"></div>

    My Company: <input type="text" ng-model="MyEmployer.CompanyName" />

    <div ng-include="'/templates/address.html'"></div>
</div>

Here is how I would imagine the address template file at /templates/address.html would look like:

<div>
    Street: <input type="text" ng-model="Street" />
</div>

As you can see i'm trying to re-use the address template here. So how do you pass the proper objects to this template?

Answer 1

Answer I managed to solve the problem myself and wanted to post it here for the next person who might be looking for the same treat.

My Solution

In my OP I had a model object with two addresses, one for the person's home and another for his/her employer. So taken the same object model and same address template still at /templates/address.html, we can add two additional controllers:

app.controller('personAddressController', ['$scope', function($scope) {
   $scope.Street = function(newValue) { return arguments.length ? model.Address.Street = newValue : model.Address.Street; }
}]);
app.controller('companyAddressController', ['$scope', function($scope) {
   $scope.Street = function(newValue) { return arguments.length ? model.MyEmployer.Address.Street = newValue : model.MyEmployer.Address.Street; }
}]);

And ng-include usage for our address template:

<div ng-include="'/templates/address.html'" ng-controller="personAddressController"></div>

<div ng-include="'/templates/address.html'" ng-controller="companyAddressController"></div>

Also we need to modify our address template:

<div>
    Street: <input type="text" ng-model="Street" ng-model-options="{ getterSetter: true }" />
</div>
<!--or add a form if you have more fields like i did-->
<form ng-model-options="{ getterSetter: true }">
    <div>
        Street: <input type="text" ng-model="Street" />
    </div>
</form>

More information on ng-model-options and setter/getter (bottom of the page): https://docs.angularjs.org/api/ng/directive/ngModel

Though watch out when adding a form since enter key will do a submission by default, but you can easily control that if you wanted to.

Lastly, you can use directives to do all of this as someone has suggested already, but you would end-up using angular directives as controllers and according to angular they aren't meant for that, more info here: AngularJS - Directives vs Controllers