Second instance of angular controller does not display declared variables - angularjs

Question

I have a page that has two instances of the same controller, the first one is loaded with the page and the second comes from an ajax request. Inside the controller I have a variable called filter, with initial value equal to "status". When I try to display this variable in the first instance it displays correctly. But when I show this variable in the second instance it looks undefined, it shows Filter: # {{mClerk.filter}}. The changeFilter function works in both instances.
My controller
app.controller('clerkCtrl', function ($scope, $http, $compile, $timeout, notifyService, DTOptionsBuilder, DTColumnBuilder) {
this.filter = 'status';
this.changeFilter = function (filter) {
this.filter = filter;
};
});
First Instance,
<div ng-controller="clerkCtrl as Clerk">
Filter: #{{Clerk.filter}} <!-- OK -->
<div class="card">
<div class="card-header">
<h2><i class="zmdi zmdi-accounts-list zmdi-hc-fw"></i> Lista</h2>
</div>
<div style="padding: 0px 20px;">
<div class="card-body table-responsive">
<table datatable="" dt-options="Clerk.dtOptions" dt-columns="Clerk.dtColumns"
class="table table-striped"></table>
</div>
</div>
</div>
</div>
Second instance, from a ajax request:
<div ng-controller="clerkCtrl as mClerk">
Filtro: #{{mClerk.filter}} <!-- FAILED -->
<button ng-click="mClerk.changeFilter('date')">Change filter</button>
</div>
Function that brings the page to the second instance,
$scope.loadPage = function (page) {
$http.post(page, [], $scope.config)
.then(function (response) {
$scope.modal.body = $sce.trustAsHtml(response.data.body);
$scope.modal.title = $sce.trustAsHtml(response.data.title);
$('#modalx').modal('show');
$scope.reloadPlugins();
setTimeout(function () {
$compile(angular.element('.modal-body').contents())($scope);
}, 0);
});
};