$http GET request only working when I refresh the page - angularjs

Question

I have an AngularJS app that is connected to MongoDB. I have articles that I am pulling from the database that is then ng-repeated onto an article page. I have a button with Read More... that takes the user to the specific article. When the single article view becomes active I make a get request to the database to get the article._id. The get request is only working on page reload and not when I activate the view. See code below...
AngularJS Controller
app.controller('ArticleViewController', ['$scope', '$location', '$http', '$routeParams', '$window', function($scope, $location, $http, $routeParams, $window){
// $window.location.reload();
let id = $routeParams.id;
console.log(id);
$http({
cache: true,
method: 'GET',
url: '/:id'
params: { id }
}).then(function successCallback(res) {
$scope.article = res.data;
}).catch(function errorCallback(err) {
if (err) {
alert('THERE WAS AN ERROR WITH THE DATABASE');
}
});
}]);
The interesting thing is that I am getting the routeParams.id so part of the controller is working. Also, when I uncomment the $window.location.reload the article loads but it just loads the JSON object into the browser window. Thank you in advance for any help.
Routing with Express and Mongoose Schema
router.get('/:id', function(req, res, next){
Article.findById(req.params.id, function(err, article){
if(err) {
return err;
} else {
console.log(article);
res.json(article);
}
});
});
Mongoose Schema
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var articleSchema = new Schema({
image: String,
title: String,
about: String,
article: String,
id: String
});
var Article = mongoose.model('Article', articleSchema);
module.exports = Article
Nodejs w/Express
'use strict'
const express = require('express');
const path = require('path');
// const api = require('api');
// const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const request = require('request');
const mongoose = require('mongoose');
// const logger = require('morgan');
const env = require('./env');
const routeMw = require('./public/middleware/routing.mw');
let article = require('./public/routes/article')
let guide = require('./public/routes/guide')
const app = express();
const clientPath = path.join(__dirname, "./public");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/article', article);
app.use('/guide', guide)
app.use('/article/:id', article);

Answer 1

You have syntex error problm in http request.
You have need to change in parms paramiter i think show.
app.controller('ArticleViewController', ['$scope', '$location', '$http', '$routeParams', '$window', function($scope, $location, $http, $routeParams, $window){
// $window.location.reload();
let id = $routeParams.id;
console.log(id);
$http({
cache: true,
method: 'GET',
url: '/:id'
params:{"id": id}
}).then(function successCallback(res) {
$scope.article = res.data;
}).catch(function errorCallback(err) {
if (err) {
alert('THERE WAS AN ERROR WITH THE DATABASE');
}
});
}]);