Почему я не могу обновить значение переменной в службе AngularJS из контроллера?

Я использую сервис AngularJS, чтобы получать данные JSON со страницы PHP для визуализации диаграммы Angular NVD3.

Сначала вся страница работает нормально, но затем, когда я использую кнопки HTML для изменения значения параметра, данные не будут обновляться / изменяться соответственно.

<h1>Infográficos</h1>
<div class="btn-group btn-group-sm">
<button type="button" ng-click="mudaValorDoFiltro('ma')" class="btn btn-default">Macrossegmento</button>
<button type="button" ng-click="mudaValorDoFiltro('es')" class="btn btn-default">Esfera</button>
<button type="button" ng-click="mudaValorDoFiltro('mo')" class="btn btn-default">Modalidade</button>
<button type="button" ng-click="mudaValorDoFiltro('st')" class="btn btn-default">Status</button>
</div>
<nvd3 options="options" data="data"></nvd3>

Поскольку я хочу создать диаграмму AngularJS NVD3, мне нужно было также включить следующий код:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>
<script src="bower_components/angular-nvd3/angular-nvd3.min.js" type="text/javascript"></script>

Как вы видете, ng-click вызывает функцию, которая меняет значение $scope.filtro в контроллере.

.controller('InfograficosCtrl', ['$scope', 'InfograficosServico' , function($scope, InfograficosServico) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function (d) {
return d.label;
},
y: function (d) {
return d.value;
},
showValues: true,
valueFormat: function (d) {
return d3.format(',.0f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'Macrossegmento'
},
yAxis: {
axisLabel: 'Quantidade',
axisLabelDistance: -10
}
}
};

// This is the data that come from a PHP pade through an AngularJS service
$scope.data = [];

// This is the default value to $scope.filtro
$scope.filtro = "ma";

// This is the function that I'm using to get the values from the button
$scope.mudaValorDoFiltro = function(novoValorDoFiltro){
$scope.filtro = novoValorDoFiltro;
};
$scope.$watch('filtro', function(filtro){
$scope.filtro = filtro;
console.log(filtro); // The variable is being updated when I click the buttons
});

// The data in the service is NOT being updated
InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
// This is the AngularJS NVD3 object
$scope.data = [{
key: "Quantidade de projetos por macrosssegmento",
values: data
}];
});
}]);

Вот полный код сервиса

.factory('InfograficosServico', ['$q', '$http', function ($q, $http) {
return {
barChart: function(filtro){
var defer = $q.defer();
$http.get(
'api/bar-chart.php',
{
cache: 'true',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
params: {
filtro: filtro.filtro
}
}
)
.success(function(data) {
defer.resolve(data);
});

return defer.promise;
}
};
}]);

Я не понимаю, почему данные не обновляются, но переменная успешно просматривается в контроллере.

Что я делаю неправильно?

Извините за любые английские ошибки.