AngularJS ng-repeat for one row in PDO fetch - php

Question

I am newer to Angular and seem to be having difficulty finding out why I'm getting blank fields. I'm using the 1.7.7 version of angular-min and angular-route.
The data is being pulled from a table called "news" and I am only needing the ID and ARTICLE columns. The ARTICLE column is stored from a CKEditor textarea.
My route looks like:
var app = angular.module("HabbfinityApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl : "home.php"
}).when("/home", {
redirectTo : "/"
}).when("/news", {
templateUrl : "news.php"
}).when("/newsinfo/:id", {
templateUrl : "newsinfo.php",
controller: "newsList"
}).otherwise({
redirectTo : "/"
});
}]);
app.controller("newsList", function($scope, $http, $routeParams){
var id = $routeParams.id;
$http.get("newsitem.php?id=" + id)
.then(function(resp){
$scope.item = resp;
});
});
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
My newsitem.php looks like:
<?php
require('config2.php');
$id = $_GET["id"];
$newsQuery = $dbh->prepare("SELECT id, article FROM news WHERE id=:id LIMIT 1");
$newsQuery->execute(array(":id"=>$id));
$newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
echo json_encode($newsQueryData);
?>
My newsinfo.php looks like:
<div class="row">
<div class="col-md-12">
<div class="panel-default panel-custom">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-lg fa-newspaper-o" aria-hidden="true"></i> News</h3>
</div>
<div class="panel-body">
<div ng-controller="newsList">
<div ng-repeat="x in item">
<img src="assets/images/news.png" alt="News" class="img-center img-responsive">
<br>
Tweet
<br>
<br>
<p ng-bind-html="x.article | unsafe"></p>
</div>
</div>
</div>
</div>
</div>
</div>
ISSUE
After the first image, twitter button and actual article, everything gets repeated another five times, so I end up with six images and six tweet buttons where the ID of the repeated five is blank.
Here's a var_dump using htmlentities so you can see exactly what those columns are pulling in.
string(899) "{"id":"610","article":"<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">All of us at habbfinity would like wish our<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">Builder<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"color:#2980b9\"><span style=\"font-size:48px\">Sarah<\/span><\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><img alt=\"Image result for happy birthday gif\" src=\"http:\/\/bestanimations.com\/Holidays\/Birthday\/flowers\/happy-birthday-vintage-roses-gold-gif.gif\" \/><\/p>\r\n"}"
I've tried doing:
<div ng-repeat="x in item | limitTo: 1">
That doesn't work.
TEMP FIX
After reading through some of the posts on here, I managed a temporary fix.
I added the following to the newsList controller:
$scope.id = $routeParams.id;
I then changed newsinfo.php by moving the image and twitter button outside of ng-repeat and changed {{x.id}} in the twitter link to {{id}}.
QUESTION
How can I fix this to allow everything to be within the ng-repeat without having to use the temporary fix?
Or is what was done for the temporary fix the better way of doing it anyway?
EDITED ANSWER / QUESTION
Thanks to the suggestion below, I was able to get this resolved.
However, I have one more question.
Is there a way to do this on one page? For example, news.php is just a list of news posts and newsinfo.php is the single news post. Am I able to do something to get it all on news.php and keep the route to only /news, which would show the list if the route isn't news/# or show the specific item if the route is news/#?