My AngularJS Service not Updating when User Click link with different $routeParams - angularjs

Question

I'm using a service in angularJS which gets a JSON object and passes it to a controller whenever a user clicks a specific link, /match/id-:matchId', it uses the $routeParams of the :matchId to select which JSON object to request.
The problem it once the user clicks one /match/id-:matchId' link and then tries going to another match with a different ID in the URL, the JSON object does not change, it remains the same. If the user refreshed the page, then they will get the correct JSON object on the page.
Here's the code:
var app = angular.module('app', ['ngRoute']); // TODO: 'ngAnimate', 'ui.bootstrap'
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '/app/static/home.html',
controller: 'mainController as mainCtrl'
})
.when('/match/id-:matchId', {
templateUrl: '/app/components/match/matchView.html',
controller: 'matchController as matchCtrl'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}]);
app.controller('matchController', ['$routeParams', 'matchService', function ($routeParams, matchService) {
var matchCtrl = {};
var promise = matchService.getMatch($routeParams.matchId);
promise.then(function (data)
{
matchCtrl.match = data;
});
}])
app.service("matchService", function ($http, $q)
{
var deferred = $q.defer();
function getMatch(matchId) {
var url = 'https://jsonplaceholder.typicode.com/posts/' + matchId;
return $http({
method: 'GET',
// cache: true,
url: url,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).
then(function(response) {
//your code when success
// lgTblCtrl.amateurTable = data;
deferred.resolve(response);
console.log('SUCCESS!');
}, function(response) {
//your code when fails
console.log('ERROR!');
deferred.reject(response);
});
return deferred.promise;
}
this.getMatch = getMatch;
})
There are no console errors but when I put breakpoints in the chrome source panel I can see that when the user refreshes the page the code get's called in a different order. This is the order specific lines of code are run depending on how the user landed on a page, by clicking a button or refreshing the page:
Browser Refresh
var promise = matchService.getMatch($routeParams.matchId);
return deferred.promise;
deferred.resolve(response);
matchCtrl.match = data;
Click On A Link
var promise = matchService.getMatch($routeParams.matchId);
return deferred.promise;
matchCtrl.match = data;
deferred.resolve(response);
I'm new to AngularJS, What am I missing here?

Answer 1

This looks like an issue with your deceleration of your 'deferred' variable. The promise is returned correctly the first time, but then it resolves right away whenever the function is called again as the promise is resolved the first time.
Try the following to see if it fixes your issue, moving the declaration of the promise into the function:
app.service("matchService", function ($http, $q) {
function getMatch(matchId) {
var deferred = $q.defer();
var url = 'https://jsonplaceholder.typicode.com/posts/' + matchId;
return $http({
method: 'GET',
// cache: true,