How to re-use "component" in angularjs? - angularjs

Question

I have a view for editing address, that has a controller attached to it. It fetches all states and territories, with some internal nomenclature, allows user to select country/state, allows use to enter zip code and it fetches correct city etc. There is also validation, and model that gets populated. It depends on some server side services also. Now, I need to use this exact same functionality in like 5-6 forms. I don't want to copy or repeat logic, I would like to declare it in view as directive, and bind complete model (Address) to model of the enclosing view. How do I do this? How do I make connection between view controller and directive controller, and also how do I make connection between view's model (vm.address) and enclosing model (for example vm.client.address)?
Let's say I have this html snippet that has a controller (addressEditCtrl) associated with it.
<div class="row" data-ng-controller="addressEditCtrl">
<div class="col-xs-3">
<div class="form-group">
<label>Address:</label>
<span style="margin-left: 10px; font-weight: normal; font-size: 9px;">
Clear
</span>
<textarea class="form-control" style="height: 80px; width: 300px;"
data-ng-model="vm.address.street" maxlength="255"></textarea>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="zipCode">Zip Code:</label><br>
<input id="zipCode" type="text" class="form-control" placeholder="" style="float: left; width: 45%; margin-right: 10px;"
data-ng-model='vm.address.zipCode'
data-ng-blur="vm.bindZipCodeInfo()" maxlength="5">
<input id="zipCode2" name="zipCode2" type="text" class="form-control" placeholder="" style="float: left; width: 45%;"
data-ng-model='vm.mailingZipPlus' maxlength="4">
</div>
<div class="col-xs-4">
<label for="city">City:</label>
<input id="city" type="text" class="form-control" placeholder=""
data-ng-model='vm.address.city' maxlength="30">
</div>
<div class="form-group col-xs-5 p-0">
<label for="county">County:</label>
<input id="county" class="col-xs-12" type="text" disabled
data-ng-model='vm.address.countyName'>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="states">State:</label>
<select id="states" class="form-control"
data-ng-model="vm.address.stateCode"
data-ng-options="state.Code as state.Description for state in vm.states">
<option value=''> Please Select</option>
</select>
</div>
<div class="col-xs-6">
<label for="countries">Country:</label>
<select id="countries" class="form-control"
data-ng-model="vm.selectedCountry"
data-ng-options="country as country.Description for country in vm.countries"></select>
</div>
</div>
</div>
</div>
I want to turn this into directive. This piece does not work, because in link function scopes are different (directive vs addressEditorCtrl). I am also not sure if I need link or controller defined on the directive as I am not manipulating anything.
(function (angular) {
'use strict';
angular
.module('app')
.directive('srAddressEditor', srAddressEditor);
srAddressEditor.$inject = [];
function srAddressEditor() {
var directive = {
templateUrl: '/app/shared/addressEditor/addressEdit.html',
scope: {
address:'=address'
}
};
return directive;
}
})(angular);
This is what I am after, two way binding. vm.client.mailingAddress and vm.address in above address editor are of the same shape. Any change in either one of them should be synched. I also want to be able to put multiple of these on the form, so isolated scope is what I am after.
<div data-ng-controller="clientEditCtrl">
<div class="col-xs-12">
<sr-address-editor address="vm.client.mailingAddress"></sr-address-editor>
</div>
</div>