Angular Strap "bs-tabs" directive: model does not update - angularjs

Question

For a project at work, I have to use the "bs-tabs" directive in "Angular-Strap".
There are two panels in the implemented page. In the first panel you can choose a customer. Each time after selecting the customer the second select box (address selection) in the bottom panel should be updated with the address which is the main residence of the customer. The problem is that the activeCustomer model does not update and the activeAddress does not update too.
I tried to fix that by updating the model in javascript. This approach updates the second model when you select a customer for the first time but when you change the address in the "address selection" select box there is a bug.
If you change the customer once again the second panel does not update anymore. You can find both explained situations in my jsfiddle example here.
var app = angular.module("myApp", ['mgcrea.ngStrap']);
app.controller('agencyCtrl', ['$scope', function($scope) {
$scope.activeOffice = null;
$scope.activeCustomer = null;
$scope.activeCustomer2 = null;
$scope.activeAddress = null;
$scope.activeAddress2 = null;
$scope.setAddress = function() {
if ($scope.activeCustomer !== null) {
$scope.activeCustomer.addresses.forEach(function(address) {
if ($scope.activeCustomer.main_residence_id === address.address_id) {
$scope.activeAddress = address;
}
});
}
};
$scope.setAddress2 = function() {
//debugger;
$scope.activeCustomer2 = this.aCtrl.customerForm2.customerSelect2.$modelValue;
if ($scope.activeCustomer2 !== null) {
$scope.activeCustomer2.addresses.forEach(function(address) {
if ($scope.activeCustomer2.main_residence_id === address.address_id) {
$scope.activeAddress2 = address;
}
});
}
};
$scope.setAddress3 = function() {
if ($scope.activeCustomer3 !== null) {
$scope.activeCustomer3.addresses.forEach(function(address) {
if ($scope.activeCustomer3.main_residence_id === address.address_id) {
$scope.activeAddress3 = address;
}
});
}
};
$scope.customer = [{
"name": "Dominik Mustermann",
"main_residence_id": "2",
"addresses": [{
"address_id": "1",
"name": "Cologne / Germany",
"city": "Cologne",
"country": "Germany",
}, {
"address_id": "2",
"name": "Rome / Italy",
"city": "Rome",
"country": "Italy"
}]
}, {
"name": "Joe Bloggs",
"main_residence_id": "3",
"addresses": [{
"address_id": "3",
"name": "Berlin / Germany",
"city": "Berlin",
"country": "Germany",
}, {
"address_id": "4",
"name": "New York / Usa",
"city": "New York",
"country": "Usa"
}]
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.tpl.js"></script>
<div class="container col-xs-4", ng-controller="agencyCtrl">
<p style="padding-top: 20px">
First try <span style="color: red">Not working! </span>When I use the bs-tabs directive from angular-strap there is a bug when updating the second select box (address selection). I know that this is because the
"activeCustomer" model does not update
<p>
<hr>
<bs-tabs>
<bs-pane title='Customer Info'>
<div class="col-xs-12" style="padding-top: 20px">
<form name="customerForm" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" name="customerSelect" ng-model="activeCustomer" ng-change="setAddress()" ng-options="customer as customer.name for customer in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name" ng-model="activeCustomer.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" name="addressSelect" ng-options="address as address.name for address in activeCustomer.addresses" ng-model="activeAddress">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city" ng-model="activeAddress.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country" ng-model="activeAddress.country">
</div>
</div>
</div>
</div>
</form>
</div>
</bs-pane>
<bs-pane title="Empty" disabled="true"></bs-pane>
</bs-tabs>
</div>
<div class="container col-xs-4", ng-controller="agencyCtrl as aCtrl">
<p style="padding-top: 20px">
Second try <span style="color: red">Not working too! </span>Tried to fix the problem with the "activeCustomer" model. But still not working perfectly
<p>
<hr>
<bs-tabs>
<bs-pane title='Customer Info'>
<div class="col-xs-12" style="padding-top: 20px">
<form name="aCtrl.customerForm2" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" name="customerSelect2" ng-model="activeCustomer2" ng-change="setAddress2()" ng-options="customer2 as customer2.name for customer2 in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name2" ng-model="activeCustomer2.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" name="addressSelect2" ng-options="address2 as address2.name for address2 in activeCustomer2.addresses" ng-model="activeAddress2">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city2" ng-model="activeAddress2.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country2" ng-model="activeAddress2.country">
</div>
</div>
</div>
</div>
</form>
</div>
</bs-pane>
<bs-pane title="Empty" disabled="true"></bs-pane>
</bs-tabs>
</div>
<div class="container col-xs-4", ng-controller="agencyCtrl">
<p style="padding-top: 20px"><span style="color: blue">Working example for comparison! </span>When I do not use the bs-tabs directive, then my example works as expected.
<p>
<hr>
<div class="col-xs-12" style="padding-top: 20px">
<form name="customerForm3" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" ng-model="activeCustomer3" ng-change="setAddress3()" ng-options="customer3 as customer3.name for customer3 in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name3" ng-model="activeCustomer3.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" ng-options="address3 as address3.name for address3 in activeCustomer3.addresses"
ng-model="activeAddress3">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city3" ng-model="activeAddress3.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country3" ng-model="activeAddress3.country">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
I would be happy if you could tell me how to solve the problem with updating the model.
I hope I could explain my problem and sorry for my bad written english.